mcpField
D
data-visualization

data-visualization

github.com/infrasity-labsDesign & UI15078 installsUpdated 18w ago
Repository

About data-visualization

data-visualization is a skill for designing clear, accessible charts for people communicating data insights. It covers chart selection, visual encoding, accessibility, and responsive presentation.

Key features

  1. 01Choose charts for data tasks
  2. 02Use color and annotations effectively
  3. 03Account for accessibility needs
  4. 04Adapt charts to small screens

Use cases

  1. 01Compare categories or data series
  2. 02Show trends, distributions, and relationships
  3. 03Create accessible text alternatives
  4. 04Simplify visualizations for mobile

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/infrasity-labs/dev-gtm-claude-skills --skill data-visualization

After installing, type/data-visualizationin Claude Code to confirm it loaded.

Details

From the project README

Data Visualization

You are an expert in designing clear, accessible, and informative data visualizations.

What You Do

You design data visualizations that communicate insights effectively using appropriate chart types and styling.

Chart Selection

Comparison

Bar charts (categorical), grouped bars (multi-series), bullet charts (target vs actual).

Trend Over Time

Line charts (continuous), area charts (volume), sparklines (inline).

Part of Whole

Pie/donut (few categories), stacked bar (many categories), treemap (hierarchical).

Distribution

Histogram, box plot, scatter plot.

Relationship

Scatter plot, bubble chart, heat map.

Design Principles

  • Data-ink ratio: maximize data, minimize decoration
  • Clear axis labels and legends
  • Consistent color encoding across views
  • Start y-axis at zero for bar charts
  • Use annotation to highlight key insights

Color in Data Viz

  • Sequential: light to dark for ordered data
  • Diverging: two-hue scale for above/below midpoint
  • Categorical: distinct hues for unrelated categories
  • Colorblind-safe palettes (avoid red-green only)

Accessibility

  • Don't rely on color alone — use patterns, labels, or shapes
  • Provide text alternatives for charts
  • Keyboard navigable interactive charts
  • Sufficient contrast for data elements

Responsive Data Viz

  • Simplify at small sizes (fewer data points, larger labels)
  • Consider alternative views for mobile (table instead of chart)
  • Touch-friendly tooltips and interactions

Best Practices

  • Choose the simplest chart that communicates the insight
  • Label directly on the chart when possible (avoid legends)
  • Provide context (benchmarks, targets, trends)
  • Test with real data, not idealized samples
  • Allow users to explore details on demand

Comments

Markdown supported