// SLIDE 01 — HOOK

BUBBLE MAP

California and Texas Absorb Nearly Half of All Household Aid Disbursements

Bubble Map — Figure 25.1 — California and Texas Absorb Nearly Half of All Household Aid Disbursements
NARRATION

California and Texas Absorb Nearly Half of All Household Aid Disbursements Figure 25.1 , California and Texas Absorb Nearly Half of All Household Aid Disbursements

// SLIDE 02 — WHAT THIS CHART IS

WHAT THIS CHART IS.

A proportional symbol map encodes a quantitative variable as the area of a circle placed at a geographic centroid. The a

What this chart is — This chart type belongs to the FT Visual Vocabulary's Spatial category, specifically proportional symbol. Its task is si
NARRATION

A proportional symbol map encodes a quantitative variable as the area of a circle placed at a geographic centroid. The active perceptual channel is 2D size estimation , viewers compare circle footprints to judge relative magnitude. Because the symbol is anchored to a point rather than filling the administrative polygon, the encoding decouples visual weight from geographic area entirely. Wyoming and Rhode Island receive equally legible circles regardless of how much land each occupies.

// SLIDE 03 — WHY IT WAS CHOSEN HERE

WHY IT WAS CHOSEN HERE.

The message is about absolute reach — how many households were served, not how many per capita or per square mile. That

Why it was chosen here — The primary flaw of bubble maps — overlap in high-density regions — is addressed in three layers here. Partial fill opac
NARRATION

The message is about absolute reach , how many households were served, not how many per capita or per square mile. That distinction immediately disqualifies the choropleth: choropleth shading implies proportion relative to the polygon's area, which forces viewers to mentally normalize every shade against state population or geography. That cognitive burden belongs to the chart, not the viewer. The bubble map carries it by encoding raw count directly in circle area, leaving the viewer free to compare size.

// SLIDE 04 — WHAT A CHOROPLETH WOULD BREAK

WHAT A CHOROPLETH WOULD BREAK.

A choropleth of raw household counts would make Montana appear data-rich — large, mid-tone polygon — when its absolute c

What a choropleth would break — design decision — sqrt radius scaling Circle radius is set via d3.scaleSqrt() , which maps sqrt(value) to a pixel range.
NARRATION

A choropleth of raw household counts would make Montana appear data-rich , large, mid-tone polygon , when its absolute count is among the lowest in the dataset. Texas's dominance would be undercut by the visual mass of vast, sparsely-populated Western states. The choropleth's failure mode here is area conflation: polygon darkness reads as magnitude, but polygon size is geographically determined, not data-determined.

// SLIDE 05 — FRAMEWORK REFERENCE

FRAMEWORK REFERENCE

framework — FT Visual Vocabulary The FT Visual Vocabulary separates proportional symbols from choropleths on exactly thi

NARRATION

framework , FT Visual Vocabulary The FT Visual Vocabulary separates proportional symbols from choropleths on exactly this axis: use a choropleth for rates and ratios bounded by administrative units; use a proportional symbol for totals and absolute counts at a centroid. The operative test , does the polygon's area carry information about the variable? If no, remove it from the encoding channel and place a symbol at the centroid instead.

// SLIDE 06 — PROMPT

PROMPT

bubble-map.htmla full HTML page with inline CSS and inline D3 v7 (loaded from The chart should fill the viewport, be responsive on resi
bubble-map/data.jsonthe data file the chart loads via d3.json("./bubble-map/data.json"), with a fallback inline literal in the HTML if the f
FY 2024 simulated food assistance reach by U.S. state. Placeholderreplace with real program records.
fipsstring, 2-digit zero-padded FIPS code — must match us-atlas state IDs exactly
statestring, full state name
NARRATION

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

// SLIDE 07 — AI WAYBACK MACHINE

AI WAYBACK MACHINE.

Charles BoothRun this:"Charles Booth (social reformer)"Now make the prompt better.
NARRATION

The ideas in this chapter didn't appear from nowhere. Charles Booth mapped poverty across London block-by-block in his 1889 Descriptive Map of London Poverty , color-coding streets from "lowest class, vicious" to "upper-middle and upper class." It was the prototype for every social-data spatial visualization since. Charles Booth, circa 1895. AI-generated portrait based on a public domain photograph (Wikimedia Commons).

// SLIDE 08 — THESIS

THE CORE CLAIM.

The ideas in this chapter didn't appear from nowhere. Charles Booth mapped poverty across London block-by-block in his 1

Charles Booth, circa 1895. AI-generated portrait based on a public domain photograph (Wikimedia Commons).

NARRATION

The ideas in this chapter didn't appear from nowhere. Charles Booth mapped poverty across London block-by-block in his 1889 Descriptive Map of London Poverty , color-coding streets from "lowest class, vicious" to "upper-middle and upper class." It was the prototype for every social-data spatial visualization since. Charles Booth, circa 1895. AI-generated portrait based on a public domain photograph (Wikimedia Commons).

// SLIDE 09 — CLOSE

ASK THE QUESTION. APPLY THE FRAMEWORK.

WHAT THIS CHART IS//WHY IT WAS CHOSEN HERE//WHAT A CHOROPLETH WOULD B

Brutalist D3 × Claude · Ch.25 · Bubble Map

NARRATION

That is the framework. Brutalist D3 times Claude, chapter 25: Bubble Map. The patterns are now in place. Apply them.

01 / 09
Brutalist D3 × Claude · Ch.25 · Nik Bear Brown