The gap was 22 points in 2016 , it is 67 in 2024 Figure 43.1 , The gap was 22 points in 2016 , it is 67 in 2024

A line graph encodes quantitative values as position along the y-axis , the most accurate perceptual channel in Cleveland and McGill's hierarchy , and connects successive points with a line that implies continuity. The line itself is not a data encoding; it is a visual metaphor for the path a value took between measurements. An upward slope means increase; a downward slope means decrease; diverging lines mean a growing gap. These readings are pre-attentive , the direction is understood before any axis is read.

The data has a continuous time axis (annual, 2016, 2024) and three series whose divergence is the message. A line graph is uniquely suited to divergence stories: the visual distance between lines at any x-position directly encodes the gap. In 2016 the three lines start close together; by 2024 the space between them is dramatically wider. No other chart form renders that expanding space as immediately.

A grouped bar chart of this data requires 9 year-groups times 3 bars = 27 bars. Each year-group reads as a comparison at a moment rather than a trajectory over time . The viewer must mentally connect the high-income bars across all nine groups to perceive the trend , work the line chart does automatically. More critically, the growing gap between series cannot be seen in grouped bars without computing differences.

The one decision worth knowing: lines animate in order from highest final value to lowest , high-income first, low-income last. This is not alphabetical. It creates a deliberate reveal: the viewer sees the leading line establish a ceiling, then watches the gap widen as subsequent lines draw in below. The ordering is an editorial argument that the distance matters, not just the levels.

FT Visual Vocabulary + Tufte FT Visual Vocabulary: Change over time , Trend . Abela quadrant: Comparison (items over time, many periods). Tufte: the line graph has among the best data-ink ratios of any chart form , every pixel of line is a data encoding. Gridlines are kept light and sparse; they are references, not decoration.

Paste this into Claude Code to generate a working version of this chart, plus its data file. The result will not be a perfect replica , the goal is that the reader can run the prompt, get a chart of this type, and read its source. Generate a complete, self-contained line graph in D3 v7. Two files:

The ideas in this chapter didn't appear from nowhere. Nicolas Oresme drew the first known time-series-style line graphs in the 14th century , plotting velocity against time and computing the area beneath. He worked centuries before the analytical geometry Descartes is usually credited with founding. Nicolas Oresme, 14th century. AI-generated illustration based on a public domain painting (Wikimedia Commons).

The ideas in this chapter didn't appear from nowhere. Nicolas Oresme drew the first known time-series-style line graphs in the 14th century , plotting velocity against time and computing the area beneath. He worked centuries before the analytical geometry Descartes is usually credited with founding. Nicolas Oresme, 14th century. AI-generated illustration based on a public domain painting (Wikimedia Commons).