Data Visualization

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)

Visual encodings ranked by perceptual accuracy:

1. Position along common scale (most accurate)
2. Position on non-aligned scales
3. Length
4. Angle/slope
5. Area
6. Volume
7. Color saturation/hue (least accurate)

Implication: Bar charts (position) > pie charts (angle) > bubble charts (area)

Preattentive Attributes

Properties processed in <250ms without conscious effort:

• Color (hue, saturation)
• Form (orientation, length, width, size, shape)
• Spatial position
• Motion

Use preattentive attributes for the most important data—they "pop out" automatically.

Channel Effectiveness by Data Type

2. Interaction Design

Shneiderman's Mantra (1996)

"Overview first, zoom and filter, then details on demand"

1. Overview — Show entire dataset, establish context
2. Zoom & Filter — Reduce complexity, focus on subset
3. Details on Demand — Tooltips, click-to-expand, drill-down

Interaction Patterns

3. Chart Selection

By Question Type

By Data Volume

Common Anti-Patterns

• ❌ Pie charts with >5 slices (use bar chart)
• ❌ 3D charts without strong justification
• ❌ Dual-axis with unrelated scales (misleading)
• ❌ Non-zero baselines for bar charts (distorts perception)
• ❌ Truncated axes without clear indication

4. Color

Palette Types

Colorblind Safety

• 8% of men, 0.5% of women have color vision deficiency
• Never rely on color alone—use shape, pattern, labels
• Safe sequential: viridis, cividis, plasma
• Safe categorical: ColorBrewer's colorblind-safe options
• Test with: Coblis, Sim Daltonism, Chrome DevTools

Perceptual Uniformity

• Avoid rainbow colormaps (jet)—perceptual steps are uneven
• Use viridis, parula, cividis for sequential data
• These ensure equal perceptual distance between values

Color Guidelines

• 4.5:1 contrast ratio for text (WCAG AA)
• 3:1 contrast for UI components
• Max 7-10 distinct categorical colors
• Use saturation/lightness variation for emphasis

5. Layout Algorithms

🚨 Before implementing ANY layout algorithm, check if a library exists.

Algorithm → Library Mapping

When to Use Each Layout

These problems are solved. Never implement from scratch.

6. Rendering & Performance

Rendering Technology Thresholds

<1000 elements    → SVG
                    - DOM events work naturally
                    - Accessibility (ARIA) supported
                    - Crisp at any zoom level
                    - CSS styling

1000-10000        → Canvas
                    - Batch rendering
                    - Manual hit testing required
                    - Lower memory footprint
                    - requestAnimationFrame for animation

>10000            → WebGL
                    - GPU acceleration
                    - Sigma.js, deck.gl, regl
                    - Complex setup
                    - Limited text rendering

Performance Patterns

Anti-Patterns

• ❌ 5000 SVG nodes (use Canvas)
• ❌ Layout computation on main thread
• ❌ Hit testing without spatial indexing
• ❌ Rendering off-screen elements
• ❌ Animating thousands of elements individually

7. Libraries

Graph Layouts

Charting

When to Use D3 vs Higher-Level Libraries

Use D3 when:

• Need complete control over rendering
• Building novel/custom visualizations
• Integrating with existing SVG/Canvas code
• Performance-critical with custom optimizations

Use higher-level libraries when:

• Standard chart types suffice
• Faster development time matters
• Team less experienced with D3
• Need built-in responsiveness/animation

8. Composition & Layout

Project Composition (Dashboard Level)

• Visual hierarchy — Guide eye to most important first
• Grid systems — Align elements for coherence
• Grouping — Related visualizations together
• White space — Breathing room, not wasted space
• Reading flow — Z-pattern or F-pattern for Western audiences

Chart Composition (Single Chart)

Aspect Ratio Guidelines

• Line charts: ~16:9 for trends (banking to 45°)
• Bar charts: Depends on number of bars
• Scatter plots: Often square (1:1) for correlation
• Maps: Preserve geographic proportions

9. Annotation

Annotation Types

Best Practices

• Annotate the insight, not just the data — "Sales peaked in Q3" not just "Sales over time"
• Use callouts sparingly — Highlight 1-3 key points maximum
• Direct labeling — Embed labels in chart when possible (vs separate legend)
• Provide context — Benchmarks, historical reference, targets
• Layer information — Overview visible, details on interaction

Text Hierarchy

1. Title (largest, boldest)
2. Subtitle/caption
3. Axis titles
4. Tick labels
5. Annotations
6. Source (smallest)

10. Accessibility

WCAG Requirements

• AA minimum (AAA preferred)
• 4.5:1 contrast ratio for normal text
• 3:1 contrast for large text and UI components
• No information conveyed by color alone

Keyboard Navigation

• Tab through interactive elements
• Arrow keys for traversing data points
• Enter/Space for selection
• Escape to cancel/close

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>

• Use ARIA labels and roles
• Provide text alternatives
• Announce dynamic updates with live regions
• Structure for logical reading order

Alternative Representations

• Data tables — Provide as fallback for all charts
• Text summaries — Describe key insights
• Sonification — Audio representation for time-series
• Tactile graphics — For physical accessibility

11. Anti-Patterns Summary

Design Anti-Patterns

Implementation Anti-Patterns

12. Academic Foundations

Seminal Papers

Essential Resources

Summary

🚨 Before implementing visualization:

1. What question are you answering? → Select chart type
2. What's your data volume? → Select rendering technology
3. Is there an established algorithm? → Use the library
4. Is it accessible? → Color, keyboard, screen reader
5. Does it follow perceptual best practices? → Encoding hierarchy