Marimekko Chart

Description

A Marimekko chart (also known as a mosaic plot) extends the stacked bar chart by varying the width of each column in addition to the height of each segment. The width of a column encodes the total size of one category (e.g., market size of a region), while the stacked segments within each column show the composition (e.g., market share of different products). The result is a rectangular area that fills the entire plotting region, with every cell’s area proportional to its contribution to the grand total.

This double encoding — width for one dimension, height for another — makes the Marimekko chart uniquely suited for showing how both the size and composition of categories vary simultaneously. It answers questions like “not only does Region A have a larger market than Region B, but it also has a different product mix.” The area of each cell is the product of its column width and row height, providing a third implicit encoding.

Marimekko charts are information-dense but demand careful design. Variable-width columns make it harder to compare segment heights across columns because the bars are not aligned to a common baseline or width. Labels and tooltips are essential for readability. The chart works best with a moderate number of categories (3-7 per axis) and audiences comfortable with sophisticated chart types.

When to Use

• Showing market share across segments AND regions simultaneously
• Visualizing how both the size of categories and their internal composition vary
• Strategic analysis where both absolute size and relative mix matter
• Comparing portfolio compositions across entities of different total sizes

When NOT to Use

• When precise comparison of individual segments is essential — variable widths impede comparison; use a grouped bar chart
• When there are many categories on either axis (>7) — cells become too small to read
• For audiences unfamiliar with the chart type — the double encoding requires explanation
• When only composition matters (not relative category sizes) — use a stacked bar chart with uniform widths

Anatomy

• Columns: Variable-width vertical bars, one per primary category. Width encodes that category’s total value.
• Segments: Stacked rectangles within each column. Height (proportion) encodes the sub-category’s share. Area encodes absolute contribution.
• Category axis: Labels along the bottom identifying primary categories. Tick positions are not uniform.
• Composition axis: A percentage axis (0-100%) on the vertical side.
• Cell labels: Text inside each rectangle showing the sub-category name or percentage.
• Width labels: Optional annotations below each column showing the total value that determines width.

Variations

• Mosaic plot: The statistical version used for visualizing contingency tables, often with gaps between cells and standardized residual shading.
• Spine plot: A one-dimensional variant where only width varies and segments stack to 100%.
• Percentage Marimekko: All columns are normalized to the same height (100%) but widths vary, focusing purely on composition differences.
• Nested Marimekko: Multiple levels of sub-categories encoded through nested rectangles.

Code Reference

// Observable Plot - normalized stacked bar (Marimekko approximation)
Plot.plot({
  marks: [
    Plot.barY(data, {
      x: "region",
      y: "revenue",
      fill: "product",
      offset: "expand",
      tip: true
    }),
    Plot.ruleY([0, 1])
  ],
  x: { label: "Region" },
  y: { label: "Market Share", tickFormat: ".0%" },
  color: { legend: true }
})