Data visualization is not chart generation -- it is visual argumentation. The chart type, color palette, annotation, and title are all rhetorical choices that either strengthen or weaken the story.
Core Principles
Principle
Rule
Title = Insight
Chart titles state the takeaway, not the data label. "California leads with 39M" not "Population by State"
Story-Intent First
Ask "what story?" before "what chart?"
Data-Ink Ratio
Every pixel of ink should represent data. Remove everything else (Tufte)
3-Second Test
If a viewer can't grasp the point in 3 seconds, redesign
Annotation = Argument
Callouts carry the story; the chart is evidence, the annotation is the argument
Module 1: Story-Intent Chart Selection
The primary axis for chart selection is what story the user wants to tell. Data shape is a secondary constraint.
Step 1 -- Identify Story Intent
Story Intent
Question Being Answered
Primary Charts
Advanced Charts
Compare
"How do these items rank or differ?"
Bar, Horizontal Bar, Grouped Bar, Radar
Beeswarm, Parallel Coordinates
Change Over Time
"How has this evolved?"
Line, Area, Stacked Area
Streamgraph, Ridgeline
Part-to-Whole
"What share does each segment hold?"
Donut, Stacked Bar, Pie
Waffle, Sunburst
Distribution
"How is this spread? What's normal vs. outlier?"
Histogram, Scatter
Violin, Beeswarm, Ridgeline
Relationship
"How are these variables connected?"
Scatter, Bubble
Chord, Network Graph, Parallel Coords
Flow / Process
"Where does it go? What are the paths?"
Horizontal Bar (stages)
Sankey, Chord
Hierarchy
"How is this organized in levels?"
Treemap
Sunburst
Spatial Pattern
"Where are the concentrations?"
Heatmap
Network Graph
Deviation
"What deviates from the baseline?"
Bar (diverging), Line (+ reference line)
Beeswarm
Step 2 -- Narrow by Data Shape
Data Shape
Compatible Intents
Ruled Out
Categorical + numeric
Compare, Part-to-Whole, Distribution
Flow (unless sequential)
Two numeric variables
Relationship, Distribution
Part-to-Whole
Time series
Change Over Time, Deviation
Hierarchy
Network / adjacency
Relationship, Flow
Part-to-Whole, Change Over Time
Hierarchical (parent-child)
Hierarchy, Part-to-Whole
Change Over Time, Distribution
Flow matrix (source-target)
Flow, Relationship
Compare (use grouped bar)
Step 3 -- Audience & Context Filter
Choose Standard When
Choose Advanced When
Audience expects familiar shapes
Complex relationships (flows, networks)
Tooltip interactivity is critical
Distribution shape matters more than values
Chart.js handles the data shape
Hierarchical structure needs multi-level view
Dashboard has 3+ charts (consistency)
Single hero viz to anchor a story
Executive audience (30s scan)
Analyst audience (exploration expected)
Story-Intent Detection Heuristics
When the user doesn't state intent explicitly, infer from language:
A single chart tells one point. Paired charts reinforce the insight from a second angle.
Primary Chart
Good Pair
Why
Bar (compare)
Donut (proportion)
Shows both absolute and relative size
Line (trend)
Bar (change amount)
Shows direction and magnitude
Scatter (relationship)
Histogram (distribution)
Shows correlation and individual spread
Treemap (hierarchy)
Table (detail)
Shows structure and precise values
Sankey (flow)
Stacked bar (proportions at each stage)
Shows paths and stage composition
The Inverted Pyramid Pattern
From population.html reference -- arrange visuals in absorption order:
Layer
Component
Time to Absorb
Purpose
1
KPI cards
2 seconds
"What's the big picture?"
2
Hero chart
10 seconds
Full distribution, interactive
3
Supporting charts
15 seconds
Same data, different lens
4
Table
As needed
Precise values for analysts
5
Drill-down
On click
Detail without clutter
Module 3: Color Theory
Mandatory: Colorblind-Safe Palette
All chart output MUST use a colorblind-safe palette. The canonical palette for all Alex charting skills is Tableau 10, verified against deuteranopia, protanopia, and tritanopia:
