// SLIDE 01 — HOOK

CIRCLE PACKING

Crisis Response and Healthcare dominate the AI humanitarian footprint

Circle Packing — Figure 30.1 — Crisis Response and Healthcare dominate the AI humanitarian footprint
NARRATION

Crisis Response and Healthcare dominate the AI humanitarian footprint Figure 30.1 , Crisis Response and Healthcare dominate the AI humanitarian footprint

// SLIDE 02 — WHAT THIS CHART TYPE IS

WHAT THIS CHART TYPE IS.

Circle packing encodes hierarchy through containment and quantitative value through area . Each parent circle contains i

What this chart type is — It is a circular variant of the Treemap. The structural encoding — containment — is actually stronger in circle packing
NARRATION

Circle packing encodes hierarchy through containment and quantitative value through area . Each parent circle contains its children; each leaf circle's area is proportional to its data value. The perceptual mechanism is two-channel: spatial containment communicates structure (which things belong together), while area communicates magnitude (which things are larger). It is a circular variant of the Treemap. The structural encoding , containment , is actually stronger in circle packing than in a Treemap, because nested circles make parent-child relationships spatially unambiguous.

// SLIDE 03 — HOW TO READ THIS CHART

HOW TO READ THIS CHART.

large outer circlesmaller nested circlesColour encodes domain membershipClick any outer circleHover any circle
NARRATION

Each large outer circle represents a humanitarian domain. Its size reflects the total relative weight of AI applications within that domain. The smaller nested circles inside each domain represent individual application areas; their size encodes relative investment or activity level within the domain. Colour encodes domain membership , walnut for Crisis Response, blood-red for Healthcare, grey for Education, mist for Food Security, and sienna for Climate Resilience.

// SLIDE 04 — WHY CIRCLE PACKING — NOT TREEM

WHY CIRCLE PACKING — NOT TREEMAP

A Treemap would show the same hierarchy with better space efficiency and more accurate area comparison (rectangles are e

Why circle packing — not treemap — Circle packing makes nesting structurally unambiguous : a circle is either inside another circle or it is not. There is
NARRATION

A Treemap would show the same hierarchy with better space efficiency and more accurate area comparison (rectangles are easier to compare than circles). The trade-off: hierarchical structure is harder to read. When branches interlock in a Treemap, the parent boundary can be ambiguous , especially at three or more levels of depth. Circle packing makes nesting structurally unambiguous : a circle is either inside another circle or it is not. There is no visual ambiguity about which parent a child belongs to.

// SLIDE 05 — HONEST LIMITATIONS

HONEST LIMITATIONS

least space-efficient chart typesArea comparison is a weak perceptual channelbar chart or dot plot will outperform circle packing
NARRATION

Circle packing is among the least space-efficient chart types . The gaps between circles are wasted display area , in a 600times600 canvas, roughly 21 percent of the space is void even with optimal packing. This limits how many nodes can be shown at a legible size. Area comparison is a weak perceptual channel for circles. Humans are poor at judging the ratio between two circles of similar size , a circle with twice the area does not look twice as large.

// SLIDE 06 — ABOUT THIS EXAMPLE — AI APPLIC

ABOUT THIS EXAMPLE — AI APPLICATION LANDSCAPE IN HUMANITARIAN WORK

Humanitarians AICrisis ResponseHealthcareEducationFood Security
NARRATION

This chart maps the relative scale of AI-assisted activities across five major humanitarian domains as framed by the Humanitarians AI initiative. Each outer circle is a domain; its size encodes the total relative weight of AI application activity within that domain. The nested circles inside each domain represent specific application areas , for example, within Healthcare, the nested circles might include diagnostics support, supply chain optimisation, and disease surveillance.

// SLIDE 07 — PROMPT

PROMPT

circle-packing.htmla full HTML page with inline CSS and inline D3 v7 (loaded from The chart should fill the viewport, be responsive on resi
circle-packing/data.jsonthe data file the chart loads via d3.json("./circle-packing/data.json"), with a fallback inline literal in the HTML if t
·Hierarchical dataset for circle packing. Each leaf node has a numeric value determining circle area. Parent nodes group
namestring — label displayed inside or beside the circle
valuenumber (leaf nodes only) — determines circle area. Omit on parent nodes.
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 circle packing in D3 v7. Two files:

// SLIDE 08 — AI WAYBACK MACHINE

AI WAYBACK MACHINE.

Johannes KeplerRun this:"Johannes Kepler conjecture sphere packing"Now make the prompt better.
NARRATION

The ideas in this chapter didn't appear from nowhere. Johannes Kepler conjectured in 1611 that no arrangement of equal-size spheres in three dimensions could pack more densely than the face-centered cubic , the stacked-cannonball arrangement. The conjecture was finally proven by Thomas Hales in 1998. Every modern circle-packing layout, from sunburst files to bubble enclosures, is wrestling with the descendant of Kepler's question: how tightly can you pack circles into a container before they overlap? Johannes Kepler, circa 1610.

// SLIDE 09 — THESIS

THE CORE CLAIM.

The ideas in this chapter didn't appear from nowhere. Johannes Kepler conjectured in 1611 that no arrangement of equal-s

Johannes Kepler, circa 1610. AI-generated portrait based on a public domain engraving (Wikimedia Commons).

NARRATION

The ideas in this chapter didn't appear from nowhere. Johannes Kepler conjectured in 1611 that no arrangement of equal-size spheres in three dimensions could pack more densely than the face-centered cubic , the stacked-cannonball arrangement. The conjecture was finally proven by Thomas Hales in 1998. Every modern circle-packing layout, from sunburst files to bubble enclosures, is wrestling with the descendant of Kepler's question: how tightly can you pack circles into a container before they overlap? Johannes Kepler, circa 1610. AI-generated portrait based on a public domain engraving (Wikimedia Commons).

// SLIDE 10 — CLOSE

ASK THE QUESTION. APPLY THE FRAMEWORK.

WHAT THIS CHART TYPE IS//HOW TO READ THIS CHART//WHY CIRCLE PACKING — NOT

Brutalist D3 × Claude · Ch.30 · Circle Packing

NARRATION

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

01 / 10
Brutalist D3 × Claude · Ch.30 · Nik Bear Brown