Data Visualization Skill

Data Visualization

Visualization is communication — every visual element must serve understanding.
Prefer established algorithms/libraries (dagre, d3-force, ELK) over custom layout.
Encode by perceptual accuracy: position > length > angle > area > color.
Never rely on color alone; pair with shape, pattern, or labels.
Match rendering to scale: SVG <1000, Canvas 1000–10000, WebGL >10000.
Before chart selection catalogs or rendering/a11y detail, read the matching resource below.

State the question the viz must answer and the data volume.
Before picking a chart type or encoding, read references/chart-selection.md.
Choose encoding/chart; reject pie-heavy, 3D, dual-axis, and non-zero bar baselines when they mislead.
Before implementing layout/render/a11y, read references/rendering-and-a11y.md.
Pick SVG/Canvas/WebGL and a layout library; keep layout off the main thread when heavy.
Add title/desc, keyboard support, table fallback; verify colorblind-safe encoding.

references/chart-selection.md — encoding hierarchy, chart-by-question, color, anti-patterns. Read when choosing a chart.
references/rendering-and-a11y.md — render thresholds, layouts, perf, a11y, libraries. Read when implementing.

[ ] Question → chart type selected accordingly
[ ] Data volume → rendering technology matches threshold
[ ] Established algorithm/library used (not custom layout)
[ ] Colorblind-safe: shape/pattern/label, not color alone
[ ] Accessible: title, description, table fallback, keyboard
[ ] Perceptually honest: position encoding, zero baseline, 2D, single axis meaning

General UI without data graphics → ui-design-principles. Backend analytics pipelines are out of scope.
Adjacent: design-principles, documentation-standards.