Error: missing channel value: x1 when providing Plot.area attributes

[rossbowen]

I'm using Observable JS within Quarto (but just had a go using a notebook on the Observable site too to check it wasn't a Quarto issue).

This code creates an exponential chart with a default area fill, and a blue line.

lambda = 1;
x = Array.from({length: 51}, (_, i) => i / 10);
y = x.map((x_i) => lambda * Math.exp(-lambda * x_i));
coordinates = x.map((x_i, i) => [x_i, y[i]]);

Plot.plot({
  marks: [
    Plot.area(coordinates),
    Plot.line(coordinates, { stroke: "blue", strokeWidth: 4 } ),
  ],
});

I want to customise the colour of the area fill, but when I try to do something similar to what I have done with the line, I get an error.

lambda = 1;
x = Array.from({length: 51}, (_, i) => i / 10);
y = x.map((x_i) => lambda * Math.exp(-lambda * x_i));
coordinates = x.map((x_i, i) => [x_i, y[i]]);

Plot.plot({
  marks: [
    Plot.area(coordinates, { fill: "red" }),
    Plot.line(coordinates, { stroke: "blue", strokeWidth: 4 } ),
  ],
});

Error: missing channel value: x1

[mbostock]

Try using Plot.areaY (and Plot.lineY) instead. See https://observablehq.com/plot/marks/area for details.