MENA's Shelter Burden Is Double SSA's —Column Width Encodes Total Aid Share, Height Encodes Sector Mix
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
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.
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).
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.
Marimekko charts require a specific reading contract: the viewer must first understand that column width ≠ data value ,
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.
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:
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).
Armi Ratia, circa 1965. AI-generated portrait based on a public domain photograph (Wikimedia Commons).
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).
Brutalist D3 × Claude · Ch.44 · Marimekko Chart
That is the framework. Brutalist D3 times Claude, chapter 44: Marimekko Chart. The patterns are now in place. Apply them.