// SLIDE 01 — HOOK

NETWORK DIAGRAM

Data Integration and Crisis Mappingare the central hubs of the AI ecosystem

Network Diagram — Figure 47.1 — Data Integration and Crisis Mapping are the central hubs
NARRATION

Data Integration and Crisis Mappingare the central hubs of the AI ecosystem Figure 47.1 , Data Integration and Crisis Mapping are the central hubs

// SLIDE 02 — WHAT THIS CHART IS

WHAT THIS CHART IS.

A network diagram (or node-link diagram) encodes relationships between entities as nodes connected by link lines. The pe

What this chart is — Force-directed layouts use a physics simulation: links act as springs pulling nodes together, while a global repulsion f
NARRATION

A network diagram (or node-link diagram) encodes relationships between entities as nodes connected by link lines. The perceptual mechanism is spatial proximity , the force-directed layout clusters well-connected nodes together, making dense sub-graphs (communities) visible without explicit labelling. The viewer's eye traces paths between nodes to understand chains of relationship. Force-directed layouts use a physics simulation: links act as springs pulling nodes together, while a global repulsion force pushes all nodes apart. The resulting position is an energy minimum, not a meaningful coordinate system.

// SLIDE 03 — WHY IT WAS CHOSEN HERE

WHY IT WAS CHOSEN HERE.

The data structure is a tripartite network: three node groups (organisations, technologies, domains) connected by direct

Why it was chosen here — No matrix, bar chart, or hierarchy encodes this. A chord diagram could show pairwise flows but would lose the tripartite
NARRATION

The data structure is a tripartite network: three node groups (organisations, technologies, domains) connected by directed and undirected edges of three semantic types. The message is structural , which entities are most connected, which technologies bridge the most domains, and which organisations cluster around the same capabilities. No matrix, bar chart, or hierarchy encodes this. A chord diagram could show pairwise flows but would lose the tripartite structure. A tree would impose a hierarchy that doesn't exist in the data.

// SLIDE 04 — THE HAIRBALL PROBLEM

THE HAIRBALL PROBLEM.

adjacency matrixchord diagramarc diagram
NARRATION

Network diagrams degrade rapidly with scale. At ~60, 80 nodes and high link density, the layout becomes a "hairball" , visually dense, analytically useless. This dataset sits at 21 nodes and 49 links (average degree ~4.7), which is within the legible range. If your network grows beyond this, the correct alternatives are: an adjacency matrix (scales well, loses spatial intuition), a chord diagram (shows flow magnitudes between groups), or an arc diagram (preserves ordering, reveals clusters through arc density).

// SLIDE 05 — THREE ENCODING DECISIONS

THREE ENCODING DECISIONS.

Node size by degree.Link color by type.Group color on nodes.
NARRATION

Node size by degree. Nodes with more connections are larger, making hubs immediately legible without requiring the viewer to count edges. Data Integration and Crisis Mapping visually dominate because they have the highest degree. Link color by type. Three semantic edge types (uses, enables, operates in) are color-coded and styled , directed edges carry arrowheads; "operates in" edges are dashed. Color encodes the relationship type redundantly with style, supporting color-blind users.

// SLIDE 06 — PROMPT

PROMPT

network-diagram.htmla full HTML page with inline CSS and inline D3 v7 (loaded from The chart should fill the viewport, be responsive on resi
network-diagram/data.jsonthe data file the chart loads via d3.json("./network-diagram/data.json"), with a fallback inline literal in the HTML if
Node-link data for a force-directed network diagram. Three node groups form a layered ecosystemhumanitarian organisations, AI/technology capabilities, and operational domains. Links encode which orgs use which techn
nodes.idstring — unique identifier referenced by links
nodes.labelstring — full name shown in 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 network diagram in D3 v7. Two files:

// SLIDE 07 — AI WAYBACK MACHINE

AI WAYBACK MACHINE.

Jacob L. MorenoRun this:"Jacob L. Moreno"Now make the prompt better.
NARRATION

The ideas in this chapter didn't appear from nowhere. Jacob L. Moreno drew the first sociogram in 1934 , a network diagram of which children at a girls' reform school liked or disliked which other children. He coined "sociometry" and laid the foundation for modern social network analysis. Jacob L. Moreno, circa 1934. 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. Jacob L. Moreno drew the first sociogram in 1934 — a network diagr

Jacob L. Moreno, circa 1934. AI-generated portrait based on a public domain photograph (Wikimedia Commons).

NARRATION

The ideas in this chapter didn't appear from nowhere. Jacob L. Moreno drew the first sociogram in 1934 , a network diagram of which children at a girls' reform school liked or disliked which other children. He coined "sociometry" and laid the foundation for modern social network analysis. Jacob L. Moreno, circa 1934. 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//THE HAIRBALL PROBLEM

Brutalist D3 × Claude · Ch.47 · Network Diagram

NARRATION

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

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