Cookbook — Marimekko Chart — Semiotic

Home · Getting Started · Charts · Features · Playground

This page requires JavaScript for interactive chart demos.

AI / Machine-readable docs: llms.txt · llms-full.txt · CLAUDE.md · schema.json · API Reference · Examples

View on GitHub · npx semiotic-ai for CLI access

Machine-readable page content

Canonical: https://semiotic.nteract.io/cookbook/marimekko-chart

Marimekko Chart

Standard stacked bar charts encode only one quantitative dimension in the column width. A Marimekko (or mosaic) chart encodes a second dimension by varying column widths, so both the height proportion and the column width carry meaning. This recipe uses StreamOrdinalFrame'sdynamicColumnWidth to create a variable-width stacked bar chart showing market segments across regions.

The Visualization

The Marimekko chart encodes data along both the x and y axis. Column widths are proportional to the total market value via the dynamicColumnWidth prop, while bars within each column show segment percentages.

This data is randomly generated.

import { StreamOrdinalFrame } from "semiotic" const colors = { "Almond lovers": "#ac58e5", "Berry buyers": "#E0488B", "Carrots-n-more": "#9fd0cb", "Delicious-n-new": "#e0d33a" } const frameProps = { /* --- Data --- */ data: [{ market: "Auburn, AL", segment: "Almond lovers", value: 3840, pct: 0.54 }, { market: "Auburn, AL", segment: "Berry buyers", value: 1920, pct: 0.27 }, ... ], chartType: "bar", /* --- Size --- */ size: [700,400], margin: { left: 45, top: 40, bottom: 80, right: 50 }, /* --- Layout --- */ barPadding: 8, dynamicColumnWidth: "value", stackBy: "segment", /* --- Process --- */ oAccessor: "market", rAccessor: "pct", /* --- Customize --- */ pieceStyle: (d12) => { return { fill: colors2[d12.segment], stroke: "white", strokeWidth: 1 }; }, showAxes: true, /* --- Annotate --- */ oLabel: true, rFormat: (d12) => Math.floor(d12 * 100) + "%" } export default () => { return <StreamOrdinalFrame {...frameProps} /> }

How It Works

The dynamicColumnWidth prop tells StreamOrdinalFrame to size each column proportionally to a data field. Here, the rawvalue (total sales) determines column width, whilepct (percentage of sales by segment) determines bar height. Two axes communicate both dimensions:

JSX

const frameProps = { rAccessor: "pct", oAccessor: "market", dynamicColumnWidth: "value", chartType: "bar", showAxes: true, rFormat: d => Math.floor(d * 100) + "%", oLabel: true, pieceStyle: d => ({ fill: colors[d.segment], stroke: "white", strokeWidth: 1 }) }

The left axis shows the percentage breakdown within each market. The oLabel prop renders column labels at the correct variable-width positions. Note that the category axis ticks themselves use the uniform band scale and may not align perfectly with dynamic column widths.

Key Takeaways

dynamicColumnWidth sizes ordinal columns proportionally to a data value, enabling Marimekko and mosaic charts.
Combining dynamicColumnWidth with stacked bars encodes two quantitative dimensions simultaneously.
Known limitation: The category axis ticks use StreamOrdinalFrame's uniform band scale, so they appear at equal-width positions rather than at the actual variable-width column centers. The oLabel prop correctly positions per-column labels using computed column positions. The value (rAccessor) axis is unaffected.
Rotated oLabel text prevents overlap when column widths vary significantly.

StreamOrdinalFrame — the underlying frame with dynamicColumnWidth support
BarChart — standard bar chart without variable widths
Slope Chart — another custom ordinal layout