// HAI — AID ALLOCATION · REGION × SECTOR · 2024 ESTIMATE

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

Marimekko Chart — Humanitarian Aid by Region and Sector Five-column Marimekko chart. Column width encodes each region's share of total humanitarian aid: Sub-Saharan Africa 35%, MENA 28%, South Asia 18%, Latin America 12%, Other Regions 7%. Within each column, segment height encodes sector composition: Food Security (walnut, top), Health (blood-red), Shelter (dim-gray), Education (mist), Protection (obsidian, bottom). Cell area represents each sector-region combination's share of the global total.
// LEARN — MARIMEKKO / MOSAIC PLOT · FT VISUAL VOCABULARY: PART-TO-WHOLE ABELA QUADRANT: COMPARISON + COMPOSITION

What Makes a Marimekko Work — And Why Cell Area Is the Real Message

What this chart is

A Marimekko chart (also called a Mosaic Plot) is a two-variable 100% chart: both axes run from 0% to 100%, 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. A cell whose column is 35% wide and whose segment is 42% tall occupies exactly 14.7% of the total chart area — which equals 14.7% of the total data. This area-as-proportion property is the chart's defining characteristic and its primary cognitive demand.

Two encodings, one rectangle

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). This compression is Marimekko's strength — and the source of its notorious legibility ceiling at high cell counts.

What the alternatives would break

A 100% 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% of total aid while Other Regions receives 7%. 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.

Reading order and cognitive load

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% bar charts is preferable. For revealing the relationship between the two variables simultaneously, Marimekko has no close substitute.

// FRAMEWORK REFERENCE

The FT Visual Vocabulary classifies Marimekko under Part-to-whole: "Show how a single entity can be broken down into its component elements." It simultaneously touches Comparison: "Compare multiple items." Abela's framework routes here when the question is "how do the sub-category shares compare across groups, and how do the groups compare in total size?" — a bivariate composition question that requires both axes to carry distinct information. Tufte's data-ink principle is applied: the cell area itself is data (share of grand total), so every pixel of the filled rectangle carries information. The 2px column gap is the sole non-data element — it costs two pixels per boundary to purchase legible column separation, which passes the data-ink test.

// The one design decision worth knowing

Cell percentage labels are shown only when the cell is large enough to hold them without overlap — minimum 35px wide and 18px tall. Smaller cells carry no label; the tooltip delivers the value on demand. This is a deliberate progressive disclosure strategy: forcing labels into small cells would require font sizes below 8px (illegible) or rotated text (disorienting in a chart that already demands careful reading). The tooltip for any cell shows four values: region, sector, within-region share, and share of grand total = xShare × segValue ÷ 100. The grand-total area calculation is surfaced explicitly in the tooltip because it is the chart's least-intuitive output — the number the viewer most needs and is least likely to compute mentally.