// SLIDE 01 — HOOK

FLOW MAP

Syria, Venezuela and Afghanistan Generate the Largest Displacement Corridors — Three Countries Account for Over Half of

Flow Map — Figure 37.1 — Syria, Venezuela and Afghanistan Generate the Largest Displacement Corridors
NARRATION

Syria, Venezuela and Afghanistan Generate the Largest Displacement Corridors , Three Countries Account for Over Half of All Tracked Flows Figure 37.1 , Syria, Venezuela and Afghanistan Generate the Largest Displacement Corridors

// SLIDE 02 — WHAT THIS CHART IS

WHAT THIS CHART IS.

A flow map draws directed lines between geographic points where the thickness of each line encodes the volume of the mov

NARRATION

A flow map draws directed lines between geographic points where the thickness of each line encodes the volume of the movement. The viewer reads two things simultaneously: the geographic path of a flow (where it goes) and its magnitude (how much moves). The key perceptual contract of a flow map , absent in connection maps , is that width is data. A thick ribbon means more; a thin ribbon means less. The ribbon is a proportional symbol stretched along a path.

// SLIDE 03 — WHY IT WAS CHOSEN HERE

WHY IT WAS CHOSEN HERE.

The data has three simultaneous qualities that the flow map handles and no other chart type does: directionality (from c

Why it was chosen here — The connection map handles a similar dataset but with a different message: it shows the structure of a logistics network
NARRATION

The data has three simultaneous qualities that the flow map handles and no other chart type does: directionality (from crisis origin to host country), volume (magnitude of movement, which varies by orders of magnitude across corridors), and geography (the physical distance and direction of each corridor are meaningful , Syria to Turkey is a different story from Syria to Germany). Removing any of these qualities changes what you can read from the chart.

// SLIDE 04 — WHAT THE ALTERNATIVES LOSE

WHAT THE ALTERNATIVES LOSE.

A connection map would replace the tapered ribbon with a uniform-width stroke, encoding volume only through stroke-width

What the alternatives lose — design decision — tapered filled ribbons, not stroked lines The flows are drawn as filled SVG paths — closed quadratic B
NARRATION

A connection map would replace the tapered ribbon with a uniform-width stroke, encoding volume only through stroke-width , a weaker perceptual channel than area. The viewer has to mentally compare line widths rather than areas, which is harder and less accurate. More critically, a connection map implies bidirectional relationships; a flow map implies directional movement. A Sankey diagram would encode volume accurately through ribbon width at every point in the flow , but it would discard geography entirely.

// SLIDE 05 — FRAMEWORK REFERENCE

FRAMEWORK REFERENCE

framework — FT Visual Vocabulary The FT Visual Vocabulary distinguishes flow maps from connection maps on directionality

NARRATION

framework , FT Visual Vocabulary The FT Visual Vocabulary distinguishes flow maps from connection maps on directionality and volume encoding: use a connection map when the story is about network structure and link presence; use a flow map when the magnitude of each directed flow is the primary variable. The operative test: does the width of each line carry a data value? If yes, it is a flow map.

// SLIDE 06 — PROMPT

PROMPT

flow-map.htmla full HTML page with inline CSS and inline D3 v7 (loaded from The chart should fill the viewport, be responsive on resi
flow-map/data.jsonthe data file the chart loads via d3.json("./flow-map/data.json"), with a fallback inline literal in the HTML if the fet
·Global forced displacement flows by origin country, 2024 (simulated). Each flow is a directed origin-to-host corridor wi
nodes.idstring, unique short identifier
nodes.namestring, full country or place 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 flow map in D3 v7. Two files:

// SLIDE 07 — AI WAYBACK MACHINE

AI WAYBACK MACHINE.

Harry BeckRun this:"Harry Beck"Now make the prompt better.
NARRATION

The ideas in this chapter didn't appear from nowhere. Harry Beck designed the London Underground map in 1933 , abandoning geographic accuracy for topological clarity, with lines drawn at 45° and 90° angles and stations evenly spaced. The map is the ancestor of every modern transit and flow diagram. Harry Beck, circa 1933. 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. Harry Beck designed the London Underground map in 1933 — abandonin

Harry Beck, circa 1933. AI-generated portrait based on a public domain photograph (Wikimedia Commons).

NARRATION

The ideas in this chapter didn't appear from nowhere. Harry Beck designed the London Underground map in 1933 , abandoning geographic accuracy for topological clarity, with lines drawn at 45° and 90° angles and stations evenly spaced. The map is the ancestor of every modern transit and flow diagram. Harry Beck, circa 1933. 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 THE ALTERNATIVES LOS

Brutalist D3 × Claude · Ch.37 · Flow Map

NARRATION

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

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