// SLIDE 01 — HOOK

STACKED BAR

Private funding tripled in two years —but government still anchors the base

Stacked Bar — Figure 67.1 — Private funding tripled — government still anchors the base
NARRATION

Private funding tripled in two years , but government still anchors the base Figure 67.1 , Private funding tripled , government still anchors the base

// SLIDE 02 — WHAT THIS CHART IS

WHAT THIS CHART IS.

A stacked bar chart divides each bar into sequential segments representing subcategories of a total. Each bar's full hei

What this chart is — The two variants serve different analytical goals. The absolute stacked chart (default) answers "how much, and how is it
NARRATION

A stacked bar chart divides each bar into sequential segments representing subcategories of a total. Each bar's full height encodes the total value; each segment's height encodes its contribution. Unlike a grouped bar chart , which places subcategory bars side-by-side , stacking preserves the total while showing composition. The two variants serve different analytical goals.

// SLIDE 03 — THE BASELINE PROBLEM

THE BASELINE PROBLEM.

The stacked chart's structural flaw is that only the bottom segment sits on a common zero baseline. Every other segment

The baseline problem — This is why segment order matters: put the category most important to compare at the bottom. Here, Government anchors th
NARRATION

The stacked chart's structural flaw is that only the bottom segment sits on a common zero baseline. Every other segment has a different starting point in every bar, making direct comparison of non-bottom segments perceptually unreliable. The eye cannot accurately judge if the "Private Foundation" segment in 2022 is larger or smaller than in 2023 without reading the tooltip. This is why segment order matters: put the category most important to compare at the bottom.

// SLIDE 04 — WHEN TO USE ABSOLUTE VS 100%

WHEN TO USE ABSOLUTE VS 100%.

100%
view discards
100%
view** when you want to isolate compositional change from vo
100%
view, Government's declining share is visible even though it
NARRATION

Use the absolute view when the total matters , when the viewer needs to know that overall investment tripled, not just that composition shifted. The total bar height carries real information that the 100 percent view discards. Use the 100 percent view when you want to isolate compositional change from volume change. In the 100 percent view, Government's declining share is visible even though its absolute dollar value grew every year. Both facts are true; the chart choice determines which fact is foregrounded.

// SLIDE 05 — WHEN TO USE ALTERNATIVES

WHEN TO USE ALTERNATIVES.

grouped bar chartsmall multiples line chartslope chart
NARRATION

If comparing subcategory values across bars is the primary task, a stacked bar chart will always underperform. The correct alternatives: a grouped bar chart (each subcategory gets its own bar, enabling direct comparison), a small multiples line chart (one panel per category showing its trend), or a slope chart (comparing start and end points without intermediate clutter).

// SLIDE 06 — PROMPT

PROMPT

stacked-bar.htmla full HTML page with inline CSS and inline D3 v7 (loaded from The chart should fill the viewport, be responsive on resi
stacked-bar/data.jsonthe data file the chart loads via d3.json("./stacked-bar/data.json"), with a fallback inline literal in the HTML if the
·Humanitarian AI program funding by source, 2020–2024. Each record is one bar (one year). Each category field is a numeri
categories.idstring — key matching data record fields
categories.labelstring — legend and tooltip label
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 stacked bar in D3 v7. Two files:

// SLIDE 07 — AI WAYBACK MACHINE

AI WAYBACK MACHINE.

Heinz von FoersterRun this:"Heinz von Foerster"Now make the prompt better.
NARRATION

The ideas in this chapter didn't appear from nowhere. Heinz von Foerster was a cyberneticist who pushed information visualization into circular and stacked forms during the 1960s , and led the Biological Computer Laboratory at Illinois, an early home of second-order cybernetics and visual reasoning about complex systems. Heinz von Foerster, circa 1970. 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. Heinz von Foerster was a cyberneticist who pushed information visu

Heinz von Foerster, circa 1970. AI-generated portrait based on a public domain photograph (Wikimedia Commons).

NARRATION

The ideas in this chapter didn't appear from nowhere. Heinz von Foerster was a cyberneticist who pushed information visualization into circular and stacked forms during the 1960s , and led the Biological Computer Laboratory at Illinois, an early home of second-order cybernetics and visual reasoning about complex systems. Heinz von Foerster, circa 1970. AI-generated portrait based on a public domain photograph (Wikimedia Commons).

// SLIDE 09 — CLOSE

ASK THE QUESTION. APPLY THE FRAMEWORK.

WHAT THIS CHART IS//THE BASELINE PROBLEM//WHEN TO USE ABSOLUTE VS 1

Brutalist D3 × Claude · Ch.67 · Stacked Bar

NARRATION

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

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