igbuend/data-visualization

Data Visualization

Principles and best practices for effective data visualization.

Core Principles

Tufte's Foundations

Data-Ink Ratio: Maximize ink used for actual data

• Remove unnecessary gridlines, borders, backgrounds
• Eliminate 3D effects, shadows, decorative elements
• Every visual element must justify its existence

Lie Factor: Graphical representation must match data

• Lie Factor = Size of Effect in Graphic / Size of Effect in Data
• Ideal = 1. Substantial distortion when >1.05 or <0.95
• Avoid: non-zero baselines, inconsistent scales, 3D distortion

Chart Junk: Remove non-data ink and redundant data-ink

Graphical Integrity

| Practice | Rule | |----------|------| | Bar charts | Must start at zero | | Proportions | Size encodements reflect actual ratios | | 3D effects | Never use—distorts perception | | Pie charts | Maximum 3-4 slices |

Visual Perception

Gestalt Principles

| Principle | Application | |-----------|-------------| | Proximity | Cluster related data; space different categories | | Similarity | Consistent color/shape for categories | | Continuity | Connected line charts for trends | | Closure | Complete shapes, avoid unnecessary borders | | Figure/Ground | Data stands out against background | | Connection | Lines/links show relationships |

Preattentive Attributes

Processed in <200ms before conscious attention:

Hierarchy: Position > Color > Size > Shape > Orientation

| Attribute | Use Case | |-----------|----------| | Position (spatial) | Ranking, trends | | Color (hue) | Categorical distinction | | Size | Quantitative comparison | | Shape | Category distinction | | Intensity | Highlighting differences |

Color

Palette Types

Sequential: Ordered data (low → high), single hue light to dark
Diverging: Data with meaningful midpoint, two hues meeting at neutral
Categorical: Nominal data, distinct equally-spaced hues (max 6-8)

Color-Blind Safe Palettes

~8% of men and 0.5% of women have color vision deficiency. Design for them by default.

Okabe-Ito Palette (recommended default):

• Black #000000, Orange #E69F00, Sky Blue #56B4E9
• Bluish Green #009E73, Yellow #F0E442, Blue #0072B2
• Vermillion #D55E00, Reddish Purple #CC79A7

Other tested palettes: Viridis, Cividis, Paul Tol, ColorBrewer (colorblind filter)

Color Blindness Types

| Type | Prevalence | Confusion | |------|-----------|-----------| | Deuteranomaly | 5% of men | Red-green (most common) | | Protanopia | 1% of men | Red-green | | Deuteranopia | 1.3% of men | Red-green | | Tritanopia | 0.0001% | Blue-yellow (rare) | | Achromatopsia | 0.003% | No color (greyscale) |

Cultural Considerations

| Color | Western | China | Other | |-------|---------|-------|-------| | Red | Danger | Good luck | Death (some African) | | White | Purity | Death | | | Green | Environment | Infidelity | |

Accessibility

Fundamental Rule

Never use color alone to encode data. Always combine with at least one other channel:

• Color + pattern/texture (bar charts)
• Color + line style: solid, dashed, dotted (line charts)
• Color + shape (scatter plots)
• Color + direct labels (all charts)

Contrast Requirements (WCAG)

| Element | AA (minimum) | AAA (enhanced) | |---------|-------------|----------------| | Body text | 4.5:1 | 7:1 | | Large text (18pt+) | 3:1 | 4.5:1 | | Non-text (lines, bars, icons) | 3:1 | — | | Focus indicators | 3:1 | 3:1 + 2px space |

Low Vision Design

~253 million people globally have visual impairment.

Typography in charts:

• Minimum 12px for labels (14px preferred)
• Sans-serif fonts for readability
• Line height ≥1.5×
• High contrast text (4.5:1 minimum)

Layout:

• Support browser zoom to 200% without content loss
• No horizontal scrolling at zoomed levels
• Direct data labeling reduces magnification needs
• Avoid cluttered, dense layouts

Dark mode:

• Avoid pure white (#fff) on pure black (#000) — causes halation
• Use slightly heavier font weights on dark backgrounds
• Maintain all contrast ratios

Screen Reader Accessibility

Alt text for charts (follow the four-level model by Lundgard & Satyanarayan, 2021):

1. What: Chart type and data ("Bar chart showing 2024 sales by region")
2. How: Encoding method ("Bars represent revenue in USD")
3. Readout: Key values ("North America leads at $450K")
4. Insight: Patterns/trends ("45% year-over-year growth")

SVG accessibility:

<svg role="img" aria-labelledby="title desc">
  <title id="title">2024 Sales by Region</title>
  <desc id="desc">Bar chart. North America leads with 45% of revenue.</desc>
</svg>

Always provide: data table alternative or detailed description for complex charts.

Multi-Modal Access

Beyond visual, consider:

• Sonification: Map data values to pitch/rhythm (Highcharts Sonification Studio, TwoTone)
• Tactile graphics: Raised-surface charts for blind users (swell-touch paper, 3D print)
• Haptic feedback: Vibration intensity proportional to data values
• MAIDR: Multi-Access Interactive Data Representation (text + audio + tactile)

Accessibility Legislation

| Jurisdiction | Law/Standard | Requirement | |-------------|-------------|-------------| | US | Section 508, ADA | WCAG 2.0/2.1 AA (federal); courts use WCAG for ADA | | EU | European Accessibility Act (2025), EN 301 549 | WCAG 2.1 AA for public + private sectors | | UK | Equality Act 2010, PSBAR 2018 | WCAG 2.1 AA for public sector | | Japan | JIS X 8341-3:2016 | Aligned with WCAG, AA recommended | | Australia | Disability Discrimination Act 1992 | WCAG 2.1 AA benchmark | | Canada | Accessible Canada Act, AODA (Ontario) | WCAG 2.0 AA minimum, moving to 2.1 | | Singapore | Digital Service Standards | WCAG 2.1 AA for government | | China | GB/T 37668-2019 | Aligned with WCAG 2.0 | | South Korea | KWCAG 2.1 | Aligned with WCAG 2.1 |

Accessibility Testing Checklist

• [ ] Color not sole encoding method (WCAG 1.4.1)
• [ ] Text contrast ≥4.5:1 (WCAG 1.4.3)
• [ ] Non-text contrast ≥3:1 (WCAG 1.4.11)
• [ ] Supports 200% zoom (WCAG 1.4.4)
• [ ] Text spacing adjustable (WCAG 1.4.12)
• [ ] Alt text or data table provided (WCAG 1.1.1)
• [ ] Keyboard navigable (WCAG 2.1.1)
• [ ] Test with color blindness simulator (Coblis, ColorOracle)
• [ ] Test with screen reader (NVDA, VoiceOver)
• [ ] Grayscale test: still understandable?

Chart Selection

Data type:
├─ Categorical comparison → Bar chart
├─ Part-to-whole → Treemap/stacked bar (avoid pie >4 slices)
├─ Time series → Line chart
├─ Distribution → Histogram, box plot, violin
├─ Correlation → Scatter plot
├─ Geographic → Choropleth, proportional symbol
└─ Network/flow → Network graph, Sankey

Common Mistakes

Avoid

• Truncated Y-axis in bar charts
• Dual Y-axes (false correlations)

• 4 pie chart slices

• 3D charts
• Rainbow palettes without meaning
• Over-plotting (too many points)
• Color-only encoding (accessibility failure)
• Insufficient contrast on chart elements

Fixes

• Clutter → Small multiples, sparklines
• No context → Add baseline, benchmarks
• Hard to compare → Consistent scales, aligned axes
• Data overload → Filter, aggregate, progressive disclosure
• Inaccessible → Redundant encoding, alt text, data tables

Domain Guidance

Financial

• Candlestick charts for prices
• Treemaps for portfolio allocation
• Log vs linear scale for long timeframes
• Annotate key events (earnings, mergers)

Security/SOC

• Heatmaps for activity over time
• Network graphs for connection analysis
• Sankey for traffic flow
• Red/amber/green severity (with icons for color-blind users)
• Dark theme preferred (reduce eye strain)

Scientific

• Vector graphics (SVG, PDF)
• Field-specific conventions
• Follow Nature 2025 checklist: clarity, accessibility
• 300+ DPI, clear labeling
• Color-blind safe palettes mandatory for publications

Tools

| Use Case | Tool | |----------|------| | Custom web viz | D3.js, Plotly, Olli (accessible) | | BI dashboards | Tableau, Power BI, Apache ECharts | | Static reports | Matplotlib, Seaborn, ggplot2 | | Rapid prototyping | Flourish, Google Data Studio | | AI/ML integration | Python (Matplotlib, Plotly, Altair) |

Accessibility Tools

| Purpose | Tool | |---------|------| | Color blind simulation | Coblis, ColorOracle, Chrome "Let Me Color" | | Contrast checking | WebAIM Contrast Checker, axe DevTools | | Screen reader testing | NVDA (free), JAWS, VoiceOver | | Accessibility audit | WAVE, Lighthouse, Accessibility Insights | | Accessible charts | Olli (MIT), Highcharts Sonification | | Color palette design | ColorBrewer, Paul Tol, Accessible Colors |

Quick Reference

1. Start with grayscale — add color only to encode data
2. Redundant encoding — color + pattern/shape/label always
3. Okabe-Ito palette — default color-blind safe choice
4. 4.5:1 / 3:1 — text contrast / non-text contrast minimums
5. Small multiples — same chart across subsets solves clutter
6. Tufte's test — can you remove this element and still understand?
7. Alt text + data table — provide text alternatives for every chart
8. Test accessibility — simulator + screen reader + grayscale

Resources

• Tufte's 4 books (foundational)
• Wilke, Fundamentals of Data Visualization (2019)
• Lundgard & Satyanarayan, "Accessible Visualization via Natural Language Descriptions" (2021)
• Hajas et al., "Rich Screen Reader Experiences" (2022, MIT)
• Nature 2025 scientific visualization checklist
• W3C WAI: w3.org/WAI
• ColorBrewer: colorbrewer2.org
• WebAIM: webaim.org
• DIAGRAM Center: diagramcenter.org