Education Correlates With Longevity , But Population Scale Varies Dramatically Figure 24.1 , Education Correlates With Longevity , But Population Scale Varies Dramatically

A bubble chart is a trivariate scatter plot : it places data points on a Cartesian grid using position (x, y) to encode two quantitative variables, then encodes a third variable through circle area. The perceptual mechanism exploited is position along a common axis , the most accurate channel in Cleveland and McGill's encoding hierarchy , supplemented by area , which is less accurate but allows a third quantitative dimension without adding a spatial axis. Color and stroke pattern layer in a fourth variable: categorical region membership.

The data contains three quantitative variables (education, life expectancy, population) and one categorical variable (region) , a structure that cannot be represented by any two-variable chart without discarding information. A scatter plot loses population. A bar chart loses the correlation structure entirely. A bubble chart is the minimum-distortion solution for this data shape. The message , that education and longevity correlate, but that population scale differs enormously across regions , requires simultaneously visible x/y correlation and visible size variation. This chart delivers both.

The nearest alternative, a grouped bar chart , could show either education or life expectancy by country but cannot encode population size except through supplementary labeling. More critically, it destroys the correlation structure : the viewer sees regional averages or individual bars , not the relationship between the two variables. Countries where education is high but life expectancy lags (or vice versa) become invisible. A stacked area chart fails for different reasons: stacking requires values that sum to a meaningful total , this data has no such property.

Bubble charts fail at scale : beyond 30, 40 bubbles, occlusion from overlapping circles degrades legibility. This implementation addresses overlap with semi-transparent fills ( fill-opacity: 0.75 ) and renders largest bubbles first so smaller ones remain visible above them. The second hard limit , and the most common implementation error , is encoding size by radius rather than area. Encoding by radius causes exponential visual distortion: a circle twice the radius appears four times as large.

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 bubble chart in D3 v7. Two files:

The ideas in this chapter didn't appear from nowhere. W. E. B. Du Bois designed a series of data visualizations , including proportional bubbles, circular flow diagrams, and color-coded maps , for the 1900 Paris Exposition's Exhibit of American Negroes. They are among the most visually inventive infographics of any era. W. E. B. Du Bois, circa 1900. AI-generated portrait based on a public domain photograph (Wikimedia Commons).

The ideas in this chapter didn't appear from nowhere. W. E. B. Du Bois designed a series of data visualizations , including proportional bubbles, circular flow diagrams, and color-coded maps , for the 1900 Paris Exposition's Exhibit of American Negroes. They are among the most visually inventive infographics of any era. W. E. B. Du Bois, circa 1900. AI-generated portrait based on a public domain photograph (Wikimedia Commons).