// SLIDE 01 — HOOK

TIMELINE

Three Simultaneous Revolutions — Legal, Digital, and Financial —Accelerating in Parallel as Operations Scale and Multipl

Timeline — Figure 72.1 — Legal, Digital, and Financial — Accelerating in Parallel
NARRATION

Three Simultaneous Revolutions , Legal, Digital, and Financial , Accelerating in Parallel as Operations Scale and Multiply Figure 72.1 , Legal, Digital, and Financial , Accelerating in Parallel

// SLIDE 02 — WHAT THIS CHART IS

WHAT THIS CHART IS.

the gap between events is datapoint eventsspan events
NARRATION

A scaled timeline places events on a proportional time axis , the spatial distance between two events encodes the actual time interval between them. This is the defining property that separates a timeline from a simple list: the gap between events is data . A 15-year gap between two legal milestones occupies 15times the horizontal space of a 1-year gap. The viewer reads clustering, isolation, and acceleration directly from spatial density, without calculation.

// SLIDE 03 — WHY MULTI-TRACK

WHY MULTI-TRACK

When events cluster by thematic category, a single-axis timeline becomes illegible: events at the same date overlap, and

NARRATION

When events cluster by thematic category, a single-axis timeline becomes illegible: events at the same date overlap, and the viewer cannot parse which event belongs to which domain. Multi-track timelines separate events into horizontal swim lanes while maintaining a shared time axis , the most important property, because it lets the viewer look down a vertical line at any date and see what was happening simultaneously across all tracks.

// SLIDE 04 — POINT EVENTS VS. SPAN EVENTS

POINT EVENTS VS. SPAN EVENTS

The choice of circle vs. rectangle is not decorative — it encodes temporal structure . A point event (circle) conveys: t

NARRATION

The choice of circle vs. rectangle is not decorative , it encodes temporal structure . A point event (circle) conveys: this thing happened at a specific moment; its duration is irrelevant or negligible. A span event (rectangle) conveys: this thing persisted across time; its duration is part of the data. Using circles for multi-year crises would misrepresent them as instantaneous. Using rectangles for legislative votes would imply a duration that doesn't exist.

// SLIDE 05 — WHAT THE ALTERNATIVES WOULD BR

WHAT THE ALTERNATIVES WOULD BREAK.

tablecalendar viewGantt chart
NARRATION

A table lists events chronologically but loses the spatial interval: the reader cannot see that 1994, 2004 was a decade-long gap in major financing architecture. A calendar view handles daily granularity but collapses across decades , a 30-year humanitarian history becomes 360 cells that show nothing. A Gantt chart (built earlier in this series) is appropriate for future tasks with dependency relationships; a timeline is appropriate for historical events where the relationships are temporal proximity and co-occurrence, not dependency chains.

// SLIDE 06 — PROMPT

PROMPT

timeline.htmla full HTML page with inline CSS and inline D3 v7 (loaded from The chart should fill the viewport, be responsive on resi
timeline/data.jsonthe data file the chart loads via d3.json("./timeline/data.json"), with a fallback inline literal in the HTML if the fet
Multi-track timeline of key events in humanitarian response history 1991–2024. Four thematic tracks with both point evenproves the timeline renders before real data is substituted.
domainarray — x-axis start and end
todaystring ISO date — draws a reference line at this date
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 timeline in D3 v7. Two files:

// SLIDE 07 — AI WAYBACK MACHINE

AI WAYBACK MACHINE.

Mark TwainRun this:"Mark Twain"Now make the prompt better.
NARRATION

The ideas in this chapter didn't appear from nowhere. Mark Twain patented a memory-training game in 1885 , Mark Twain's Memory Builder , built around marking historical dates and events on a printed timeline. The game flopped commercially but the timeline format he formalized is essentially modern. Mark Twain, circa 1890. 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. Mark Twain patented a memory-training game in 1885 — Mark Twain's

Mark Twain, circa 1890. AI-generated portrait based on a public domain photograph (Wikimedia Commons).

NARRATION

The ideas in this chapter didn't appear from nowhere. Mark Twain patented a memory-training game in 1885 , Mark Twain's Memory Builder , built around marking historical dates and events on a printed timeline. The game flopped commercially but the timeline format he formalized is essentially modern. Mark Twain, circa 1890. 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 MULTI-TRACK//POINT EVENTS VS. SPAN EVE

Brutalist D3 × Claude · Ch.72 · Timeline

NARRATION

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

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