Module 18: Data Visualization — Design & Code Foundations

09

undefined

Interactivity

Print

📊

Static

All information visible at once; annotations provide context

Web

🖱️

Interactive

Hover reveals details; filter, zoom, drill-down

Color Gamut

Print

CMYK

Limited range

Must work in grayscale for photocopying

Web

RGB

Full spectrum

Vibrant colors; hover states add dimension

Data Updates

Print

📅

Frozen

Data locked at publication; dated clearly

Web

🔄

Live

Real-time updates; dynamic date ranges

Density

Print

300 DPI

High detail

More detail possible; readers examine closely

Web

72-144 PPI

Lower resolution

Progressive disclosure; responsive sizing

10

undefined

Visual Perception

undefined

Pre-attentive Processing

undefined

Working Memory

undefined

11

Effective Data Visualization

Real-world examples of clear data communication.

Annotation-Rich

Story-first visualization

Principles Identified:

Narrative Charts tell stories with annotations

Simplicity One chart, one message

Context Comparisons make data meaningful

Key insight: NYT graphics team leads by making data journalism accessible to general audiences.

Business Metrics

Clean, actionable data

Principles Identified:

Clarity High data-ink ratio

Hierarchy Key metrics prominent

Interactive Drill-down for details

Key insight: Stripe's dashboards prove that beautiful design and data clarity aren't mutually exclusive.

Research Data

Long-term trends

Principles Identified:

Sources Full data transparency

Interactivity Explore data yourself

Accessibility Download, embed, share

Key insight: Proves that academic data can be presented engagingly without sacrificing rigor.

12

Data Visualization Mistakes

Common errors that mislead or confuse readers.

Failure: Truncated Y-Axis

Y-axis: 95-100 (looks 3× bigger!)

Fix: Start bar charts at zero

Y-axis: 0-100 (true proportion)

Rule: Bar charts must start at zero. Truncated axes make tiny differences look huge.

Failure: 3D Chart Effects

🥧 3D Pie

Perspective distorts slice sizes

Fix: Use flat 2D representations

Flat bar chart

Accurate comparison

Rule: 3D adds no information and actively distorts perception. Always use 2D.

Failure: Rainbow Color Scales

Yellow looks brightest (false emphasis)

Fix: Use perceptually uniform scales

Viridis: perceptually uniform

Rule: Rainbow creates false emphasis and fails colorblind users. Use viridis or similar.

Failure: Too Many Categories

15-slice pie chart

Impossible to compare tiny slices

Fix: Limit to 4-5, group the rest

Top 4 + "Other"

Clear, digestible

Rule: Working memory holds ~4 items. Group minor categories into 'Other'.

13

Chart Quality Tests

Validate your visualizations meet these criteria.

01

5-Second Test

Tests: Instant comprehension

Show chart for 5 seconds, ask what it shows. If viewers can't state the main insight, simplify.

⏱️

What's the takeaway?

02

Colorblind Test

Tests: Color accessibility

View in grayscale or use colorblind simulator. 8% of men are red-green colorblind. Use patterns or direct labels as backup.

🔴 vs 🟢

Indistinguishable to 8% of men

03

Mobile Test

Tests: Responsive design

View on phone. Labels must be readable (16px min), touch targets usable (44px min). Consider simplified mobile version.

📱

Readable on small screens?

04

Honesty Test

Tests: Accurate representation

Check axis scales, proportions, cherry-picked ranges. Would a statistician approve? Misleading charts damage trust.

Y-axis starts at 0?

Full date range shown?

Proportions accurate?

14

CSS Data Visualization

Lightweight CSS-only solutions for simple charts.

.bar-chart {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  height: 200px;
}

.bar {
  flex: 1;
  background: var(--primary);
  height: var(--value);
  transition: height 0.3s ease;
}

/* Usage: style="--value: 75%" */

CSS Bar Chart via CSS

Flexbox layout - Bars align to bottom automatically
CSS custom property - --value for dynamic heights
Transition - Smooth animation on data change

Tip: Set height via inline style --value: 75% for each bar. No JavaScript needed.

.donut {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: conic-gradient(
    var(--c1) 0% var(--p1),
    var(--c2) var(--p1) var(--p2),
    var(--c3) var(--p2) 100%
  );
  mask: radial-gradient(
    circle, transparent 60%, black 60%
  );
}

CSS Donut Chart via CSS

conic-gradient - Creates pie segments
mask - Cuts center for donut hole
CSS variables - Dynamic percentages and colors

Tip: Calculate cumulative percentages: p1=40%, p2=70% means 40%, 30%, 30%.

.progress {
  height: 8px;
  background: var(--gray-200);
  border-radius: 4px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  width: var(--progress, 0%);
  background: var(--primary);
  transition: width 0.5s ease-out;
}

Progress Bar via CSS

overflow: hidden - Clips the fill to container
--progress variable - Set dynamically for updates
Transition - Smooth animation on change

Tip: Update via JavaScript: element.style.setProperty('--progress', '75%')

15

Self-Assessment

Test your data visualization knowledge.

Q1

Why should bar charts start at zero?

Click to reveal

Q2

What is the most accurately perceived visual encoding?

Click to reveal

Q3

Why are rainbow color scales problematic?

Click to reveal

Q4

When should you use direct labels vs legends?

Click to reveal

Q5

How many categories should a pie chart have?

Click to reveal

Data Visualization

Print vs Web

undefined

Science & Psychology

undefined

Real-World Examples

Effective Data Visualization

Common Failures

Data Visualization Mistakes

Visual Tests

Chart Quality Tests

5-Second Test

Colorblind Test

Mobile Test

Honesty Test

CSS Implementation

CSS Data Visualization

Self-Assessment

Self-Assessment

Key Takeaways