// SLIDE 01 — HOOK

CHORD DIAGRAM

OCHA and UNHCR Are the Network's Densest Hubs —Chord Thickness Encodes Coordination Strength

Chord Diagram — Figure 28.1 — OCHA and UNHCR Are the Network's Densest Hubs
NARRATION

OCHA and UNHCR Are the Network's Densest Hubs , Chord Thickness Encodes Coordination Strength Figure 28.1 , OCHA and UNHCR Are the Network's Densest Hubs

// SLIDE 02 — WHAT THIS CHART IS

WHAT THIS CHART IS.

circular relationship graphgestalt continuitystroke weight and opacity
NARRATION

A non-ribbon chord diagram is a circular relationship graph : nodes are arranged as arc segments on the perimeter of a circle, and connections are drawn as curved lines (chords) spanning the interior. The perceptual mechanism is gestalt continuity , the eye follows each curve from one arc to another, reading the connection as a single unit even when it crosses other chords. The circular layout implies no hierarchy (all nodes are equidistant from the center) and no direction (chords are symmetric).

// SLIDE 03 — NON-RIBBON VS. RIBBON CHORD

NON-RIBBON VS. RIBBON CHORD

A full ribbon chord diagram fills the space between two arcs with a shaped "ribbon," encoding directional flow volume: t

NARRATION

A full ribbon chord diagram fills the space between two arcs with a shaped "ribbon," encoding directional flow volume: the width of the ribbon at each end represents how much flows from that node. This is appropriate when data has meaningful direction (migration, trade, financial flows) and when per-direction volumes are precisely known. A non-ribbon chord diagram strips the filled shape away, keeping only the connection lines.

// SLIDE 04 — WHAT THE ALTERNATIVES WOULD BR

WHAT THE ALTERNATIVES WOULD BREAK.

force-directed network graphmatrix view28 simultaneous relationships
NARRATION

A force-directed network graph would show the same relationships but allows nodes to move , the viewer cannot directly compare node positions across views. The circular layout here gives every node a fixed, readable position with a labeled arc. A matrix view (heatmap of all pairs) would be more precise for exact value comparison but requires the viewer to trace rows and columns mentally , the chord diagram makes the relationship pattern immediately visual without any matrix traversal.

// SLIDE 05 — READING THE HUB PATTERN

READING THE HUB PATTERN.

A hub node in this chart is one whose arc is the starting point for many thick, dark chords. OCHA and UNHCR are visually

NARRATION

A hub node in this chart is one whose arc is the starting point for many thick, dark chords. OCHA and UNHCR are visually dense because their arcs originate the strongest chords , thick walnut and obsidian lines radiate across the circle. Government Donors and Local NGOs show thinner chords, indicating weaker or fewer coordination relationships. This hub pattern is impossible to see in a table and requires significant computation to extract from a matrix view.

// SLIDE 06 — PROMPT

PROMPT

chord-diagram.htmla full HTML page with inline CSS and inline D3 v7 (loaded from The chart should fill the viewport, be responsive on resi
chord-diagram/data.jsonthe data file the chart loads via d3.json("./chord-diagram/data.json"), with a fallback inline literal in the HTML if th
·Humanitarian crisis response coordination network. Each link represents the frequency and depth of coordination between
nodes.idstring — unique node identifier, referenced in links
nodes.labelstring — short name displayed on chart (≤12 chars preferred)
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 chord diagram in D3 v7. Two files:

// SLIDE 07 — AI WAYBACK MACHINE

AI WAYBACK MACHINE.

Augustus De MorganRun this:"Augustus De Morgan Formal Logic"Now make the prompt better.
NARRATION

The ideas in this chapter didn't appear from nowhere. Augustus De Morgan drew circular relational diagrams in Formal Logic (1847) , points arranged around a ring, lines drawn between them whenever a logical relation held. He was reasoning about syllogisms, not about gene expression or trade flows, but the layout choice was the same one Circos would make 162 years later: a ring is the most legible way to show many-to-many connections between a fixed set of entities. Augustus De Morgan, circa 1860.

// SLIDE 08 — THESIS

THE CORE CLAIM.

The ideas in this chapter didn't appear from nowhere. Augustus De Morgan drew circular relational diagrams in Formal Log

Augustus De Morgan, circa 1860. AI-generated portrait based on a public domain photograph (Wikimedia Commons).

NARRATION

The ideas in this chapter didn't appear from nowhere. Augustus De Morgan drew circular relational diagrams in Formal Logic (1847) , points arranged around a ring, lines drawn between them whenever a logical relation held. He was reasoning about syllogisms, not about gene expression or trade flows, but the layout choice was the same one Circos would make 162 years later: a ring is the most legible way to show many-to-many connections between a fixed set of entities. Augustus De Morgan, circa 1860.

// SLIDE 09 — CLOSE

ASK THE QUESTION. APPLY THE FRAMEWORK.

WHAT THIS CHART IS//NON-RIBBON VS. RIBBON CHO//WHAT THE ALTERNATIVES WOU

Brutalist D3 × Claude · Ch.28 · Chord Diagram

NARRATION

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

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