mcpField
D
data-visualization

data-visualization

github.com/owl-listenerDesign & UI3.1k2.4k installsUpdated 8w ago
Repository

About data-visualization

A design skill for choosing and styling charts to communicate data clearly and accessibly. It helps people creating visualizations match chart types to analytical goals and account for responsive layouts.

Key features

  1. 01Chart selection by analytical goal
  2. 02Color encoding and accessibility guidance
  3. 03Responsive visualization principles
  4. 04Annotations and chart labeling advice

Use cases

  1. 01Comparing categories or multiple series
  2. 02Showing trends, distributions, or relationships
  3. 03Adapting charts for mobile layouts

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/owl-listener/designer-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