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):
- What: Chart type and data ("Bar chart showing 2024 sales by region")
- How: Encoding method ("Bars represent revenue in USD")
- Readout: Key values ("North America leads at $450K")
- 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, SankeyCommon 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
- Start with grayscale — add color only to encode data
- Redundant encoding — color + pattern/shape/label always
- Okabe-Ito palette — default color-blind safe choice
- 4.5:1 / 3:1 — text contrast / non-text contrast minimums
- Small multiples — same chart across subsets solves clutter
- Tufte's test — can you remove this element and still understand?
- Alt text + data table — provide text alternatives for every chart
- 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