Data Visualization
Overview
Visualization is communication. Every visual element must serve understanding, and the choices that determine whether it succeeds (which encoding, which chart, which rendering technology, which layout algorithm) are mostly solved problems with established answers. The job is to apply those answers, not reinvent them.
The core principle: choose encodings by perceptual accuracy, use established algorithms, match rendering to data scale, and never rely on color alone. Position is read more accurately than length, length more accurately than angle, angle more than area, area more than color. That ranking drives chart selection. Graph layout (Sugiyama, force-directed, Reingold-Tilford) and rendering thresholds (SVG, Canvas, WebGL) are equally settled. Reach for the library, not a custom implementation.
When to Use
- Building charts, graphs, dashboards, or any data-driven visual
- Choosing a chart type for a given question or dataset
- Deciding between SVG, Canvas, and WebGL rendering
- Laying out a network, tree, DAG, or Sankey diagram
- Making a visualization colorblind-safe and screen-reader accessible
- Diagnosing why a chart is slow or misleading
When NOT to use: General UI styling unrelated to data display (use ui-design-principles), or static infographic art with no underlying data.
Related: design-principles for the code behind the chart, ui-design-principles for chart styling and states, documentation-standards for recording chart decisions.
Critical Rules
| Rule | Enforcement | |------|-------------| | Use established algorithms | Check dagre, d3-force, ELK.js before custom | | Perceptual accuracy | Position beats length beats angle beats area beats color | | Never color alone | 8% of men are colorblind, so use shape, pattern, labels | | Match rendering to scale | SVG <1000, Canvas 1000–10000, WebGL >10000 |
Visual Encoding Hierarchy
Cleveland & McGill (1984), ranked by perceptual accuracy:
- Position along a common scale (most accurate)
- Position on non-aligned scales
- Length
- Angle / slope
- Area
- Volume
- Color saturation / hue (least accurate)
Implication: Bar charts (position) beat pie charts (angle) beat bubble charts (area). When a comparison matters, encode it with position.
Chart Selection
By Question Type
| Question | Chart | Why | |----------|-------|-----| | How do values compare? | Bar chart | Position encoding most accurate | | How has this changed over time? | Line chart | Shows trends, handles many points | | What's the distribution? | Histogram, box plot | Shows spread, outliers, shape | | What's the relationship? | Scatter plot | Reveals correlation, clusters | | What's the part-to-whole? | Stacked bar, treemap | Shows composition | | What are the connections? | Network graph, Sankey | Shows relationships, flows | | What's the hierarchy? | Tree, treemap | Shows parent-child structure |
By Data Volume
| Volume | Approach | |--------|----------| | <20 points | Simple charts, direct labeling | | 20–500 | Standard visualization | | 500–5000 | Consider aggregation | | 5000+ | Aggregation mandatory, or Canvas/WebGL |
Design Anti-Patterns
| Anti-Pattern | Why Wrong | Fix | |--------------|-----------|-----| | Pie chart >5 slices | Hard to compare angles | Use bar chart | | 3D charts | Distorts perception | Use 2D | | Dual unrelated axes | Implies false correlation | Separate charts | | Non-zero baseline | Exaggerates differences | Start bars at zero | | Rainbow colormap | Perceptually uneven | Use viridis | | Color-only encoding | Excludes colorblind readers | Add shape/pattern/label |
Color
Palette Types
| Type | Use Case | Examples | |------|----------|----------| | Sequential | Low to high values | Blues, viridis | | Diverging | Diverge from a midpoint | RdBu, BrBG | | Categorical | Distinct categories | Set2, Tableau10 |
Colorblind Safety
- Never rely on color alone; pair it with shape, pattern, or labels
- Safe sequential palettes: viridis, cividis, plasma
- Test with Coblis or the Chrome DevTools color-blindness simulator
- 8% of men and 0.5% of women are affected
Contrast Requirements
| Element | Ratio | |---------|-------| | Normal text | 4.5:1 (WCAG AA) | | Large text | 3:1 | | UI components | 3:1 |
Rendering Technology
Match rendering to element count. Crossing a threshold without changing technology is the most common cause of a janky chart.
<1000 elements → SVG
- DOM events work naturally
- Accessibility (ARIA) supported
- CSS styling
1000-10000 → Canvas
- Batch rendering
- Manual hit testing required
- requestAnimationFrame for animation
>10000 → WebGL
- GPU acceleration
- Sigma.js, deck.gl, regl
Layout Algorithms to Libraries
These problems are solved. Never implement from scratch: a hand-rolled layout will be slower, buggier, and worse-looking than the reference algorithm.
| Problem | Algorithm | Library | |---------|-----------|---------| | Layered / DAG graphs | Sugiyama | dagre, ELK.js | | Force-directed networks | Fruchterman-Reingold | d3-force | | Tree layouts | Reingold-Tilford | d3-hierarchy | | Treemaps | Squarified | d3-hierarchy | | Sankey diagrams | — | d3-sankey | | Large graphs (10k+) | WebGL + spatial index | Sigma.js, G6 |
Performance Patterns
| Pattern | When | |---------|------| | Web Workers | Layout computation; never block the main thread | | Spatial indexing | Hit detection with a quadtree | | Level-of-detail | Simplify distant or small elements | | Viewport culling | Only render what's visible | | Debouncing | Expensive interactions | | Aggregation | Too many points to render meaningfully |
Implementation Anti-Patterns
| Anti-Pattern | Why Wrong | Fix | |--------------|-----------|-----| | Custom graph layout | Reinventing a solved problem | Use dagre/ELK | | 5000 SVG nodes | Poor performance | Use Canvas | | Layout on the main thread | Blocks the UI | Use a Web Worker | | No spatial indexing | Slow hit detection | Use a quadtree | | Rendering off-screen elements | Wasted computation | Viewport culling |
Accessibility
Screen Reader Support
<svg role="img" aria-labelledby="chart-title chart-desc">
<title id="chart-title">Monthly Sales 2024</title>
<desc id="chart-desc">Bar chart showing sales increasing
from $10M in January to $15M in December</desc>
</svg>
Keyboard Navigation
| Key | Action | |-----|--------| | Tab | Move between interactive elements | | Arrow keys | Traverse data points | | Enter / Space | Select | | Escape | Cancel / close |
Alternative Representations
- Provide a data table as a fallback
- Provide text summaries of key insights
- Don't rely on color alone
Library Selection
Charts
| Library | Best For | |---------|----------| | D3.js | Custom, highly interactive | | Observable Plot | Quick exploration | | Recharts | React integration | | ECharts | Feature-rich dashboards | | Chart.js | Simple charts |
Graphs
| Library | Best For | |---------|----------| | dagre | Layered DAGs, flowcharts | | d3-force | Organic networks | | Cytoscape.js | Graph analysis | | Sigma.js | Large graphs (10k+) |
Common Rationalizations
| Rationalization | Reality | |---|---| | "A pie chart looks friendlier" | Readers can't compare angles. If the comparison matters, use a bar chart. | | "I'll write my own layout, it's just a few nodes" | It's never just a few nodes, and edge-crossing minimization is a research problem. Use dagre. | | "Color is enough to tell the series apart" | Not for 8% of men. Add shape, pattern, or direct labels. | | "SVG is fine, it's only a few thousand nodes" | A few thousand SVG nodes will stutter. Move to Canvas past ~1000. | | "Starting the axis at zero wastes space" | A non-zero baseline exaggerates differences and misleads. Start bars at zero. |
Red Flags
- A custom graph-layout implementation when dagre/ELK/d3-force would do
- Thousands of SVG DOM nodes instead of Canvas or WebGL
- Layout computation running on the main thread
- Series distinguished by color alone
- Bar charts with a non-zero baseline
- Rainbow / jet colormap instead of a perceptually uniform one
- A chart with no
<title>/<desc>, table fallback, or keyboard support
Verification
Before shipping a visualization:
- [ ] What question does this answer? → chart type selected accordingly
- [ ] What's the data volume? → rendering technology matches the threshold
- [ ] Is there an established algorithm? → library used, not a custom implementation
- [ ] Colorblind-safe? → encoding uses shape/pattern/label, not color alone
- [ ] Accessible? → title, description, table fallback, keyboard navigation
- [ ] Perceptually honest? → position-based encoding, zero baseline, 2D, single axis meaning
Resources
| Resource | Use | |----------|-----| | data-to-viz.com | Chart selection decision tree | | colorbrewer2.org | Accessible color palettes | | D3 Gallery | Implementation patterns |