// SLIDE 01 — HOOK

CHOROPLETH

Choropleth Map — GDP per Capita

Choropleth — Figure 29.1 — GDP per Capita by Region
NARRATION

Figure 29.1 , GDP per Capita by Region

// SLIDE 02 — THE PERCEPTUAL MECHANISM

THE PERCEPTUAL MECHANISM.

A choropleth map exploits colour saturation and lightness as an encoding channel for a continuous quantitative variable

The perceptual mechanism — The critical perceptual dependency: this only works when the colour ramp is perceptually uniform — equal data steps must
NARRATION

A choropleth map exploits colour saturation and lightness as an encoding channel for a continuous quantitative variable across pre-defined geographic regions. The viewer's visual system performs an effortless pre-attentive scan , dark regions read as high, light regions as low , without requiring them to decode any axis or scale. This makes geographic concentration, clustering, and outliers immediately visible at a glance. The critical perceptual dependency: this only works when the colour ramp is perceptually uniform , equal data steps must produce equal apparent colour steps.

// SLIDE 03 — WHY IT WAS CHOSEN FOR THIS DAT

WHY IT WAS CHOSEN FOR THIS DATA.

The data structure is a one-to-one mapping of a normalized continuous variable to geographic regions (countries). The me

Why it was chosen for this data — A logarithmic scale is applied by default because GDP per capita spans three orders of magnitude ($200–$130,000). On a l
NARRATION

The data structure is a one-to-one mapping of a normalized continuous variable to geographic regions (countries). The message is about geographic variation , where in the world is the value high, where is it low, and what spatial clusters emerge? That question is fundamentally spatial, so the encoding must be spatial. A bar chart of 150+ countries would require sorting to be readable and would destroy the geographic signal entirely. A logarithmic scale is applied by default because GDP per capita spans three orders of magnitude ($200, $130,000).

// SLIDE 04 — WHAT THE ALTERNATIVE WOULD BRE

WHAT THE ALTERNATIVE WOULD BREAK.

The next-best alternative for this message is a bubble map (proportional symbol map) — circles sized by value, centred o

What the alternative would break — A nine-slice pie chart or stacked bar would be a categorical error — this data is not compositional and does not sum to
NARRATION

The next-best alternative for this message is a bubble map (proportional symbol map) , circles sized by value, centred on each country. It would be more accurate for precise comparison (area encodes magnitude, which is more readable than hue), but it fails for small countries (circles overlap in Western Europe, the Caribbean, Southeast Asia) and it cannot show the continuous geographic gradient that makes a choropleth visually compelling. The choropleth wins here because the message is about pattern across space , not precise comparison of individual countries.

// SLIDE 05 — THE ONE DESIGN DECISION WORTH

THE ONE DESIGN DECISION WORTH KNOWING.

The colour ramp interpolates from #F5EBE0 (pale parchment) to #3B1A07 (deep espresso) — both pulled from the walnut end

NARRATION

The colour ramp interpolates from #F5EBE0 (pale parchment) to #3B1A07 (deep espresso) , both pulled from the walnut end of the hai palette. This is a single-hue sequential ramp, which is perceptually honest: there is one direction of change (low goes to high), so there should be one direction of colour change. Diverging ramps (two hues meeting at a midpoint) are reserved for data with a meaningful zero or threshold , not for a one-directional continuous variable like income.

// SLIDE 06 — FRAMEWORK REFERENCE

FRAMEWORK REFERENCE

Framework — FT Visual Vocabulary FT Visual Vocabulary category: Location — "Where things are, geographic patterns and di

NARRATION

Framework , FT Visual Vocabulary FT Visual Vocabulary category: Location , "Where things are, geographic patterns and distributions." Abela quadrant: Comparison (comparing a single metric across many geographic units). Tufte principle applied: the map is the data; no redundant ink outside the colour encoding and necessary reference labels.

// SLIDE 07 — PROMPT

PROMPT

choropleth.htmla full HTML page with inline CSS and inline D3 v7 (loaded from The chart should fill the viewport, be responsive on resi
choropleth/data.jsonthe data file the chart loads via d3.json("./choropleth/data.json"), with a fallback inline literal in the HTML if the f
World countries with a normalized continuous variable (GDP per capita, USD). Each entry maps an ISO 3166-1 alpha-3 countpopulation density, literacy rate, HDI, etc. Never encode raw totals; always normalize per area, per capita, or as a rat
idstring — ISO 3166-1 alpha-3 country code (e.g. 'USA', 'DEU')
namestring — display name for tooltip
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 choropleth in D3 v7. Two files:

// SLIDE 08 — AI WAYBACK MACHINE

AI WAYBACK MACHINE.

Charles DupinRun this:"Charles Dupin"Now make the prompt better.
NARRATION

The ideas in this chapter didn't appear from nowhere. Charles Dupin drew the first known choropleth map in 1826 , a shaded map of France encoding regional illiteracy by darkness. The technique became the standard way to display any rate or density across geographic regions. Charles Dupin, circa 1830. AI-generated portrait based on a public domain engraving (Wikimedia Commons).

// SLIDE 09 — THESIS

THE CORE CLAIM.

The ideas in this chapter didn't appear from nowhere. Charles Dupin drew the first known choropleth map in 1826 — a shad

Charles Dupin, circa 1830. AI-generated portrait based on a public domain engraving (Wikimedia Commons).

NARRATION

The ideas in this chapter didn't appear from nowhere. Charles Dupin drew the first known choropleth map in 1826 , a shaded map of France encoding regional illiteracy by darkness. The technique became the standard way to display any rate or density across geographic regions. Charles Dupin, circa 1830. AI-generated portrait based on a public domain engraving (Wikimedia Commons).

// SLIDE 10 — CLOSE

ASK THE QUESTION. APPLY THE FRAMEWORK.

THE PERCEPTUAL MECHANISM//WHY IT WAS CHOSEN FOR THI//WHAT THE ALTERNATIVE WOUL

Brutalist D3 × Claude · Ch.29 · Choropleth

NARRATION

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

01 / 10
Brutalist D3 × Claude · Ch.29 · Nik Bear Brown