Creating a stacked area chart

Community Help
2

d3.stack uses keys to distinguish “series”—in your case the keys seem to be 0, 1, and 2, and you should be able to get the stacked values like so:

stackedData = d3.stack().keys([0,1,2])(results)

Note that in Plot the stacking API is much easier to use, if you haven’t played with it yet. You could try to flatten the data:

flatData = results.flatMap(([s, i, r], t) => [
  { type: "s", value: s, time: t },
  { type: "i", value: i, time: t },
  { type: "r", value: r, time: t }
])

then plot like so:

Plot.plot({
  marks: [Plot.areaY(flatData, { x: "time", fill: "type", y: "value" })]
})

untitled-2
untitled-21280×800 32.4 KB

(AreaY marks are implicitly stacked).

3 Likes