// SLIDE 01 — HOOK

MARIMEKKO CHART

MENA's Shelter Burden Is Double SSA's —Column Width Encodes Total Aid Share, Height Encodes Sector Mix

Marimekko Chart — Figure 44.1 — MENA's Shelter Burden Is Double SSA's
NARRATION

MENA's Shelter Burden Is Double SSA's , Column Width Encodes Total Aid Share, Height Encodes Sector Mix Figure 44.1 , MENA's Shelter Burden Is Double SSA's

// SLIDE 02 — WHAT THIS CHART IS

WHAT THIS CHART IS.

100%
chart** : both axes run from 0% to 100%, and every segment i
35%
wide and whose segment is 42% tall occupies exactly **14
7%
of the total chart area** — which equals 14
NARRATION

A Marimekko chart (also called a Mosaic Plot) is a two-variable 100 percent chart : both axes run from 0 percent to 100 percent, and every segment in the chart simultaneously encodes its value on both axes. The x-axis encodes each group's share of the total (column width). The y-axis encodes the sub-category composition within each group (segment height). The result is a rectangle partitioned into cells where cell area directly encodes each category-group combination's share of the grand total.

// SLIDE 03 — TWO ENCODINGS, ONE RECTANGLE

TWO ENCODINGS, ONE RECTANGLE.

group identitygroup share of totalsub-category identitysub-category share within the groupshare of the grand total
NARRATION

Every cell in a Marimekko simultaneously encodes four pieces of information: group identity (x-position), group share of total (column width), sub-category identity (fill color with redundant text label where space permits), and sub-category share within the group (segment height). The cell area synthesizes these into a fifth: the share of the grand total . No other single chart type encodes all five simultaneously without adding a fifth visual dimension (size, position, or annotation).

// SLIDE 04 — WHAT THE ALTERNATIVES WOULD BR

WHAT THE ALTERNATIVES WOULD BREAK.

100%
stacked bar chart** shows the y-axis composition correctly b
35%
of total aid while Other Regions receives 7%
NARRATION

A 100 percent stacked bar chart shows the y-axis composition correctly but assigns equal column width to all groups , the viewer cannot see that Sub-Saharan Africa receives 35 percent of total aid while Other Regions receives 7 percent. The column-width variable disappears. A treemap encodes area as proportion-of-total and handles arbitrary nesting, but loses the aligned y-axis that makes within-column composition comparison possible , the viewer cannot scan horizontally to compare "how much of each region's aid goes to Health." Marimekko is the only chart that preserves both comparisons simultaneously.

// SLIDE 05 — READING ORDER AND COGNITIVE LO

READING ORDER AND COGNITIVE LOAD

Marimekko charts require a specific reading contract: the viewer must first understand that column width ≠ data value ,

NARRATION

Marimekko charts require a specific reading contract: the viewer must first understand that column width ≠ data value , but rather encodes a separate variable. This is counterintuitive , in a standard bar chart, width is decoration. Here it is data. The chart therefore requires more viewer calibration than a simple bar chart. The FT Visual Vocabulary lists Marimekko under Part-to-whole with a note: "suitable for a general overview rather than precise comparison." For precise segment comparison, a small-multiple of standard 100 percent bar charts is preferable.

// SLIDE 06 — PROMPT

PROMPT

marimekko-chart.htmla full HTML page with inline CSS and inline D3 v7 (loaded from The chart should fill the viewport, be responsive on resi
marimekko-chart/data.jsonthe data file the chart loads via d3.json("./marimekko-chart/data.json"), with a fallback inline literal in the HTML if
·Global humanitarian aid allocation by region (x-axis column width) and sector (y-axis segment height). Fictional placeho
columns.idstring — unique column identifier
columns.labelstring — full column label (used in tooltip)
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 marimekko chart in D3 v7. Two files:

// SLIDE 07 — AI WAYBACK MACHINE

AI WAYBACK MACHINE.

Armi RatiaRun this:"Armi Ratia"Now make the prompt better.
NARRATION

The ideas in this chapter didn't appear from nowhere. Armi Ratia founded the Finnish textile company Marimekko in 1951 , whose bold geometric prints lent their name to the variable-width stacked bar chart now used to display two-way category proportions. The chart is named after the fabric pattern, not its designer. Armi Ratia, circa 1965. 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. Armi Ratia founded the Finnish textile company Marimekko in 1951 —

Armi Ratia, circa 1965. AI-generated portrait based on a public domain photograph (Wikimedia Commons).

NARRATION

The ideas in this chapter didn't appear from nowhere. Armi Ratia founded the Finnish textile company Marimekko in 1951 , whose bold geometric prints lent their name to the variable-width stacked bar chart now used to display two-way category proportions. The chart is named after the fabric pattern, not its designer. Armi Ratia, circa 1965. AI-generated portrait based on a public domain photograph (Wikimedia Commons).

// SLIDE 09 — CLOSE

ASK THE QUESTION. APPLY THE FRAMEWORK.

WHAT THIS CHART IS//TWO ENCODINGS, ONE RECTAN//WHAT THE ALTERNATIVES WOU

Brutalist D3 × Claude · Ch.44 · Marimekko Chart

NARRATION

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

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