designer-skills/ui-design/skills/data-visualization/SKILL.md

45 lines
1.9 KiB
Markdown

---
name: data-visualization
description: Design clear, accessible data visualizations with appropriate chart selection and styling.
---
# 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