| name | data-visualization |
| description | Comprehensive data visualization skill covering visual execution and technical implementation. Includes perceptual foundations, chart selection, layout algorithms, and library guidance. Triggers on: charts, graphs, dashboards, 'visualize', 'plot', data presentation, D3, Recharts, Victory. |
| version | 1.0.0 |
Data Visualization
Visualization is communication. Every visual element must serve understanding.
Critical Rules
🚨 Use established algorithms. Graph layout, tree layout, spatial indexing—these problems are solved. Check dagre, d3-force, ELK.js before implementing anything custom.
🚨 Choose encodings by perceptual accuracy. Position beats length beats angle beats area beats color. Prefer bar charts over pie charts over bubble charts.
🚨 Never rely on color alone. 8% of men are colorblind. Use shape, pattern, or labels as backup encoding.
🚨 Match rendering to scale. SVG for <1000 elements, Canvas for 1000-10000, WebGL for >10000.
1. Visual Encoding
Marks & Channels
Marks are geometric primitives representing data:
- Points (scatter plots, dot plots)
- Lines (line charts, network edges)
- Areas (bar charts, area charts, maps)
Channels are visual properties applied to marks:
- Position (x, y coordinates)
- Size (length, area, volume)
- Color (hue, saturation, lightness)
- Shape (circle, square, triangle)
- Orientation (angle, slope)
Cleveland & McGill Hierarchy (1984)
