// HAI — HUMANITARIAN HISTORY · 4 TRACKS · 26 EVENTS · 1991–2024

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

Point event
Duration event
Today
scroll or drag to pan · pinch or buttons to zoom
Multi-Track Timeline — Humanitarian History 1991–2024 Four horizontal tracks sharing a common time scale from 1991 to 2025. Track 1 (walnut): Legal and Policy — 6 events including UN Res. 46/182 (1991), Cluster System (2005), World Humanitarian Summit (2016). Track 2 (blood-red): Data and Technology — 6 events including ReliefWeb (1996), HDX Launch (2011), AI Pilots (2017–2019). Track 3 (dim-gray): Major Operations — 7 events including Rwanda (1994), Indian Ocean Tsunami (2004), Ukraine crisis (2022). Track 4 (mist): Financing — 7 events including GHD Principles (2004), Grand Bargain (2016), COVID Funding Surge (2020).
// LEARN — TIMELINE · FT VISUAL VOCABULARY: CHANGE OVER TIME + DISTRIBUTION ABELA QUADRANT: DATA OVER TIME

What Makes a Timeline Work — And Why Scale Is the Operative Word

What this chart is

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 15× the horizontal space of a 1-year gap. The viewer reads clustering, isolation, and acceleration directly from spatial density, without calculation. This chart uses two event types: point events (circles) for moments in time, and span events (rectangles) for durations — encoding the temporal structure of each event in its own geometric form.

Why multi-track

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. The vertical scan reveals co-occurrence: the 2016 column shows the World Humanitarian Summit, the Grand Bargain signing, and a funding reform peak all at the same moment — pattern that no separate track can convey.

Point events vs. span events

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. Mixing both types on the same axis, as this chart does, gives each event the temporal shape that matches its actual nature. The gestalt reading of the whole chart then shows which domains operate in bursts versus sustained engagements.

What the alternatives would break

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. The Catalogue's note about combining other visualizations with timelines points to sparklines, bar charts, or population data on individual tracks — all valid extensions of this base structure.

// FRAMEWORK REFERENCE

The FT Visual Vocabulary classifies timelines under Change over time, noting that when scaled, timelines also support Distribution: revealing when events are clustered versus sparse. Abela's framework routes here when the question is "when did these things happen, and how are they distributed in time?" Tufte's principle of the smallest effective difference applies to the two event types: the circle and rectangle must be just different enough to communicate point-vs-duration without introducing unnecessary visual complexity. Using diamonds, triangles, or elaborate icons would add cognitive load without adding information. The circle-rectangle pair is the minimum necessary geometric vocabulary for this encoding task.

// The one design decision worth knowing

Zoom is a first-class interaction, not an afterthought. The 34-year span of this dataset (1991–2024) contains events separated by hours (the 2023 earthquake) and decades (legal reform cycles). At the default zoom level, year-level granularity is readable; at 10× zoom, individual months become visible. The zoom behavior uses event.transform.rescaleX(xBase) — D3's zoom transform rescales the original x scale rather than translating a fixed scale, which means all label positions, bar widths, and axis ticks update continuously from a single source of truth. This matters because a naive implementation might translate elements and produce bars that drift from their labels. The rescale approach ensures geometric consistency at every zoom level. Double-click or the ↺ reset button returns to the full 1991–2025 view.