Data Visualization

Data Visualization

Critical rules

• 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.

Workflow

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

Resources

• 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.

Validation

• 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

Constraints

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