// SLIDE 01 — HOOK

CONNECTION MAP

Europe and North America Anchor a Hub-and-Spoke Aid Network That Converges on East Africa and the Levant

Connection Map — Figure 31.1 — Europe and North America Anchor the Aid Network
NARRATION

Europe and North America Anchor a Hub-and-Spoke Aid Network That Converges on East Africa and the Levant Figure 31.1 , Europe and North America Anchor the Aid Network

// SLIDE 02 — WHAT THIS CHART IS

WHAT THIS CHART IS.

A connection map encodes geographic relationships by drawing lines between points placed at their real coordinates. The

NARRATION

A connection map encodes geographic relationships by drawing lines between points placed at their real coordinates. The lines are the data. Positions are geographic facts. What the viewer reads is not the magnitude of a place but the structure of its connections: how many it has, how far they reach, how concentrated they are. The perceptual channel is proximity and density of lines. A node with many thick arcs is obviously central; an isolated node with one thin arc is obviously peripheral.

// SLIDE 03 — WHY IT WAS CHOSEN HERE

WHY IT WAS CHOSEN HERE.

The data is a logistics network: specific origin-destination pairs with a flow volume. The message is structural — the n

Why it was chosen here — Secondary encoding: arc stroke-width is proportional to annual tonnage via a d3.scaleSqrt() mapping — the same sqrt-area
NARRATION

The data is a logistics network: specific origin-destination pairs with a flow volume. The message is structural , the network converges on a small number of field sites from a distributed set of hubs. That is a connection story, not a magnitude story. A bubble map would encode aid volume at each location but would erase the corridor structure entirely , you would see which cities receive the most tonnage, but not which hubs supply them or how the network is wired.

// SLIDE 04 — WHAT A FLOW MAP WOULD BREAK —

WHAT A FLOW MAP WOULD BREAK — AND WHAT IT WOULD ADD

A flow map is a specialised form of connection map that encodes directionality and often merges parallel routes into a s

What a flow map would break — and what i — The other honest alternative: a matrix/adjacency heatmap, which would make the hub-by-field-site combinations legible wi
NARRATION

A flow map is a specialised form of connection map that encodes directionality and often merges parallel routes into a single tapered ribbon. It would be correct here , aid flows from hubs to field sites, not the other way. The reason it was not chosen: the routes share many intermediate paths and a proper flow map would need to merge those paths, which requires Sankey-style path merging that adds significant rendering complexity for a marginal gain in this dataset.

// SLIDE 05 — FRAMEWORK REFERENCE

FRAMEWORK REFERENCE

framework — FT Visual Vocabulary The FT Visual Vocabulary places connection maps in its Spatial category alongside choro

NARRATION

framework , FT Visual Vocabulary The FT Visual Vocabulary places connection maps in its Spatial category alongside choropleths and bubble maps. Its note on the type: connection maps are best when the connection itself is the story , not the attributes of the connected places. The operative test: could you make this point without geography? If showing which cities are connected without their actual positions would lose the story, geography is earning its keep and a connection map is the tool.

// SLIDE 06 — PROMPT

PROMPT

connection-map.htmla full HTML page with inline CSS and inline D3 v7 (loaded from The chart should fill the viewport, be responsive on resi
connection-map/data.jsonthe data file the chart loads via d3.json("./connection-map/data.json"), with a fallback inline literal in the HTML if t
·Global humanitarian aid corridor network, FY 2024 (simulated). Nodes are coordination hubs and field operation sites. Li
nodes.idstring, unique short identifier (e.g. 'GVA')
nodes.namestring, display name — city and country
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 connection map in D3 v7. Two files:

// SLIDE 07 — AI WAYBACK MACHINE

AI WAYBACK MACHINE.

Henry Drury HarnessRun this:"Henry Drury Harness"Now make the prompt better.
NARRATION

The ideas in this chapter didn't appear from nowhere. Henry Drury Harness drew the first known flow map in 1837 , for an Irish Railway Commission report , using line widths to encode passenger traffic between cities. His maps were the prototype for Minard, Sankey, and every modern connection map. Henry Drury Harness, circa 1840. AI-generated portrait based on a public domain engraving (Wikimedia Commons).

// SLIDE 08 — THESIS

THE CORE CLAIM.

The ideas in this chapter didn't appear from nowhere. Henry Drury Harness drew the first known flow map in 1837 — for an

Henry Drury Harness, circa 1840. AI-generated portrait based on a public domain engraving (Wikimedia Commons).

NARRATION

The ideas in this chapter didn't appear from nowhere. Henry Drury Harness drew the first known flow map in 1837 , for an Irish Railway Commission report , using line widths to encode passenger traffic between cities. His maps were the prototype for Minard, Sankey, and every modern connection map. Henry Drury Harness, circa 1840. AI-generated portrait based on a public domain engraving (Wikimedia Commons).

// SLIDE 09 — CLOSE

ASK THE QUESTION. APPLY THE FRAMEWORK.

WHAT THIS CHART IS//WHY IT WAS CHOSEN HERE//WHAT A FLOW MAP WOULD BRE

Brutalist D3 × Claude · Ch.31 · Connection Map

NARRATION

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

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