Marimekko charts

[mbostock]

We’ve made some progress, but it’d be nice to have an “official” recommendation of how to do this.

https://observablehq.com/@observablehq/plot-marimekko
https://observablehq.com/@fil/observable-plot-marimekko-fork (faceting and simplifications)

Older alternatives:

https://observablehq.com/@data-workflows/marimekko-chart
https://observablehq.com/d/98afd8b064f98bb6
https://observablehq.com/d/7773a4b6c91df0da

[Fil]

I think https://observablehq.com/@fil/observable-plot-marimekko-fork is the best current effort. It has a single API entry point (transform):

marimekko({ sequence: "xy", anchor: "middle", x…, y…, value:…, ...options})

Examples show how to anchor text on the top-left, use facets, change the stacking sequence from xy to yx, reverse the order on x or y.

When this is ready (it still needs Plot.channel to be released), remember to post on https://talk.observablehq.com/t/mekko-chart-with-plot/6192

[Fil]

The example is ready to merge and publish. Is this something we'd want to support as an official Plot.marimekko transform?

[mbostock]

Sure, I like it, let’s open a PR. Is there a way to preserve the axes as absolute values (from 0 to sum(value) on both x and y) rather than always going from 0 to 1?

[Fil]

We can preserve the absolute sum on the axes with:

+  const sum = d3.sum(Plot.valueof(sales, "value"))
  return Plot.plot({
    width: 960,
    height: 640,
    label: null,
+    x: {transform: d => d * sum},
+    y: {transform: d => d * sum},

If we want to do it on the computed channels instead, we could either add an option for expand (to "expandIntoRange"…), or use this transform (which should probably be written differently!):

scaleUpXY = function ({ x, y, x1, x2, y1, y2, ...options }) {
  const [X, setX] = Plot.column(x);
  const [Y, setY] = Plot.column(y);
  const [X1, setX1] = Plot.column(x1);
  const [X2, setX2] = Plot.column(x2);
  const [Y1, setY1] = Plot.column(y1);
  const [Y2, setY2] = Plot.column(y2);
  return Plot.transform(
    { x1: X1, x2: X2, y1: Y1, y2: Y2, x: X, y: Y, ...options },
    (data, facets) => {
      const scale = d3.sum(Plot.valueof(data, "value")); // this would need the original values
      const X = Plot.valueof(data, x);
      const X1 = Plot.valueof(data, x1);
      const X2 = Plot.valueof(data, x2);
      if (X) setX(X.map((d) => d * scale));
      if (X1) setX1(X1.map((d) => d * scale));
      if (X2) setX2(X2.map((d) => d * scale));
      const Y = Plot.valueof(data, y);
      const Y1 = Plot.valueof(data, y1);
      const Y2 = Plot.valueof(data, y2);
      if (Y) setY(Y.map((d) => d * scale));
      if (Y1) setY1(Y1.map((d) => d * scale));
      if (Y2) setY2(Y2.map((d) => d * scale));
      return { data, facets };
    }
  );
}

[Fil]

Here's another iteration
https://observablehq.com/@observablehq/plot-marimekko-facets-plus-order

[Fil]

SveltePlot implements Marimekko charts with a stackMosaicX transform.