Builds dashboards, reports, and data-driven interfaces requiring charts, graphs, or visual analytics. Provides systematic framework for selecting appropriate visualizations based on data characteristics and analytical purpose. Includes 24+ visualization types organized by purpose (trends, comparisons, distributions, relationships, flows, hierarchies, geospatial), accessibility patterns (WCAG 2.1 AA compliance), colorblind-safe palettes, and performance optimization strategies. Use when creating visualizations, choosing chart types, displaying data graphically, or designing data interfaces.
Systematic guidance for selecting and implementing effective data visualizations, matching data characteristics with appropriate visualization types, ensuring clarity, accessibility, and impact.
Data visualization transforms raw data into visual representations that reveal patterns, trends, and insights. This skill provides:
What type? [categorical | continuous | temporal | spatial | hierarchical]
How many dimensions? [1D | 2D | multivariate]
How many points? [<100 | 100-1K | 1K-10K | >10K]
What story to tell? [comparison | trend | distribution | relationship | composition | flow | hierarchy | geographic]
Quick Selection:
Complete decision trees: See references/selection-matrix.md
See language sections below for recommended libraries.
1000 points: Sampling or Canvas rendering
Match analytical purpose to chart type:
| Purpose | Chart Types |
|---|---|
| Compare values | Bar Chart, Lollipop Chart |
| Show trends | Line Chart, Area Chart |
| Reveal distributions | Histogram, Violin Plot, Box Plot |
| Explore relationships | Scatter Plot, Bubble Chart |
| Explain composition | Treemap, Stacked Bar, Pie Chart (<6 slices) |
| Visualize flow | Sankey Diagram, Chord Diagram |
| Display hierarchy | Sunburst, Dendrogram, Treemap |
| Show geographic | Choropleth Map, Symbol Map |
General audiences, straightforward data stories:
Specific analytical insights:
Complex data, sophisticated audiences:
Detailed descriptions: See references/chart-catalog.md
<figure role="img" aria-label="Sales increased 15% from Q3 to Q4">
<svg>...</svg>
</figure>
IBM Palette (Recommended):
#648FFF (Blue), #785EF0 (Purple), #DC267F (Magenta),
#FE6100 (Orange), #FFB000 (Yellow)
Avoid: Red/Green combinations (8% of males have red-green colorblindness)
Complete accessibility guide: See references/accessibility.md
| Rows | Strategy | Implementation |
|---|---|---|
| <1,000 | Direct rendering | Standard libraries (SVG) |
| 1K-10K | Sampling/aggregation | Downsample to ~500 points |
| 10K-100K | Canvas rendering | Switch from SVG to Canvas |
| >100K | Server-side aggregation | Backend processing |
Composable React components, declarative API, responsive by default.
npm install recharts
import { LineChart, Line, XAxis, YAxis, Tooltip, ResponsiveContainer } from 'recharts';
const data = [
{ month: 'Jan', sales: 4000 },
{ month: 'Feb', sales: 3000 },
{ month: 'Mar', sales: 5000 },
];
export function SalesChart() {
return (
<ResponsiveContainer width="100%" height={300}>
<LineChart data={data}>
<XAxis dataKey="month" />
<YAxis />
<Tooltip />
<Line type="monotone" dataKey="sales" stroke="#8884d8" />
</LineChart>
</ResponsiveContainer>
);
}
Maximum flexibility, industry standard, unlimited chart types.
npm install d3
3D visualizations, statistical charts, interactive out-of-box.
npm install react-plotly.js plotly.js
Detailed examples: See references/javascript/
Common Libraries:
When building Python implementations:
references/python/Reference the design-tokens skill for theming:
--chart-color-primary
--chart-color-1 through --chart-color-10
--chart-axis-color
--chart-grid-color
--chart-tooltip-bg
<Line stroke="var(--chart-color-primary)" />
Light/dark/high-contrast themes work automatically via design tokens.
START: What is your data?
Categorical (categories/groups)
├─ Compare values → Bar Chart
├─ Show composition → Treemap or Pie Chart (<6 slices)
└─ Show flow → Sankey Diagram
Continuous (numbers)
├─ Single variable → Histogram, Violin Plot
└─ Two variables → Scatter Plot
Temporal (time series)
├─ Single metric → Line Chart
├─ Multiple metrics → Small Multiples
└─ Daily patterns → Calendar Heatmap
Hierarchical (nested)
├─ Proportions → Treemap
└─ Show depth → Sunburst, Dendrogram
Geographic (locations)
├─ Regional aggregates → Choropleth Map
└─ Point locations → Symbol Map
Selection Guides:
references/chart-catalog.md - All 24+ visualization typesreferences/selection-matrix.md - Complete decision treesTechnical Guides:
references/accessibility.md - WCAG 2.1 AA patternsreferences/color-systems.md - Colorblind-safe palettesreferences/performance.md - Optimization by data volumeLanguage-Specific:
references/javascript/ - React, D3.js, Plotly examplesreferences/python/ - Plotly, Matplotlib, SeabornAssets:
assets/color-palettes/ - Accessible color schemesassets/example-datasets/ - Sample data for testingWorking code examples:
examples/javascript/bar-chart.tsxexamples/javascript/line-chart.tsxexamples/javascript/scatter-plot.tsxexamples/javascript/accessible-chart.tsxcd examples/javascript && npm install && npm start
# Validate accessibility
scripts/validate_accessibility.py <chart-html>
# Test colorblind
# Use browser DevTools color vision deficiency emulator
Progressive disclosure: This SKILL.md provides overview and quick start. Detailed documentation, code examples, and language-specific implementations in references/ and examples/ directories.