Stacked Area Chart, phantom Z value

Hello,

I am trying to create a Stacked Area Chart:

which displays correctly when there is only 1 z value, but when the array has multiple z values only the first z value is displayed and a phantom z null value appears breaking the chart…

The first chart has the array filtered to one value and the second one has the full array, with the Legend showing a blank z placed at the end.

Any help troubleshooting this would be greatly appreciated, I have other working Stacked Area chart notebooks so the only thing I can figure is that it is this array that is somehow breaking the Stacked Area chart function.

The code in @d3/stacked-area-chart assumes that there is one and only one value for each (x,z). It can be fixed (I’m sending you a suggestion), but I’d recommend using Observable Plot:

Plot.rectY(datasort, {
  x: "Date",
  y: "Count",
  fill: "Zone",
  interval: d3.utcDay,
  order: "sum",
  reverse: true,
  inset: 0
}).plot({
  width
})

or

Plot.areaY(datasort, {
  x: "Date",
  y: "Count",
  fill: "Zone",
  order: "sum",
  reverse: true,
  inset: 0
}).plot({
  width
})

Note that in the second case you can see “lines” connecting the values over missing dates.

2 Likes