// SLIDE 01 — HOOK

PICTOGRAM CHART

Energy Mix by Region — Each Icon = 2% of Portfolio

Pictogram Chart — Figure 52.1 — Energy Mix by Region — Each Icon = 2% of Portfolio
NARRATION

Energy Mix by Region , Each Icon = 2 percent of Portfolio Figure 52.1 , Energy Mix by Region , Each Icon = 2 percent of Portfolio

// SLIDE 02 — WHAT THIS CHART IS

WHAT THIS CHART IS.

A pictogram chart represents discrete quantities as rows or columns of icons, where each icon encodes a fixed unit count

NARRATION

A pictogram chart represents discrete quantities as rows or columns of icons, where each icon encodes a fixed unit count. The perceptual mechanism is counting and grouping: the viewer scans a row of icons the same way they scan a shelf of objects, building a concrete intuition for quantity that abstract bar lengths cannot match.

// SLIDE 03 — WHY IT WAS CHOSEN HERE

WHY IT WAS CHOSEN HERE.

The dataset is a small set of discrete categorical proportions (five energy sources, five regions, all summing to 50 ico

NARRATION

The dataset is a small set of discrete categorical proportions (five energy sources, five regions, all summing to 50 icons per region at 2 percent each) with a message about relative mix and regional comparison. The data is explicitly appropriate for pictograms: small counts, meaningful units, a comparison story. A bar chart would convey the same totals but strip the iconographic context that makes the energy mix legible without axis reading.

// SLIDE 04 — WHAT THE ALTERNATIVE WOULD BRE

WHAT THE ALTERNATIVE WOULD BREAK.

A grouped bar chart would be the statistically rigorous alternative, and it is superior when precision matters more than

NARRATION

A grouped bar chart would be the statistically rigorous alternative, and it is superior when precision matters more than engagement. The pictogram's failure mode is the partial icon problem: showing 3.7 icons is misleading because fractions of an icon imply fractional units. This implementation avoids partial icons entirely , all counts are rounded to whole icon multiples of the unit value before rendering.

// SLIDE 05 — FRAMEWORK REFERENCE

FRAMEWORK REFERENCE

FRAMEWORK FT Visual Vocabulary category: Part-to-whole / Comparisons — "Show how discrete parts compare across categorie

NARRATION

FRAMEWORK FT Visual Vocabulary category: Part-to-whole / Comparisons , "Show how discrete parts compare across categories when the subject can be represented iconographically." Tufte caution: pictograms are at risk of the lie factor when icons are scaled in two dimensions (area grows as the square of height). This implementation avoids that: every icon is the same size, and quantity is encoded only by count, never by scale.

// SLIDE 06 — PROMPT

PROMPT

pictogram-chart.htmla full HTML page with inline CSS and inline D3 v7 (loaded from The chart should fill the viewport, be responsive on resi
pictogram-chart/data.jsonthe data file the chart loads via d3.json("./pictogram-chart/data.json"), with a fallback inline literal in the HTML if
Energy mix by region. Each source value is a percentage. All source values per region must sum to 100. UNIT_PCT controlskeep it so that value / UNIT_PCT is always a whole integer for every cell.
UNIT_PCTnumber — percent represented by one icon. All values must be divisible by this.
sources.idstring — key matching the ICONS and COLORS lookups in the JS
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 pictogram chart in D3 v7. Two files:

// SLIDE 07 — AI WAYBACK MACHINE

AI WAYBACK MACHINE.

Marie NeurathRun this:"Marie Neurath"Now make the prompt better.
NARRATION

The ideas in this chapter didn't appear from nowhere. Marie Neurath co-created the Isotype pictogram system with her husband Otto, and continued the work alone after his death in 1945 , translating science, history, and statistics into pictograms for working-class and child audiences. She produced more than 80 illustrated books. Marie Neurath, circa 1948. 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. Marie Neurath co-created the Isotype pictogram system with her hus

Marie Neurath, circa 1948. AI-generated portrait based on a public domain photograph (Wikimedia Commons).

NARRATION

The ideas in this chapter didn't appear from nowhere. Marie Neurath co-created the Isotype pictogram system with her husband Otto, and continued the work alone after his death in 1945 , translating science, history, and statistics into pictograms for working-class and child audiences. She produced more than 80 illustrated books. Marie Neurath, circa 1948. 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//WHAT THE ALTERNATIVE WOUL

Brutalist D3 × Claude · Ch.52 · Pictogram Chart

NARRATION

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

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