How do I remove the gradient from a multi color line plot?

Community Help
1

Hello,

I’m just getting started with Observable and I’d appreciate your help with two questions related to this notebook.

(1) How do I remove the gradient, so each line segment is a solid color?

(2) Why don’t the colors for the categories “D - cyan,” “E - blue,” and “F - magenta” appear in the legend. Is this is related to why the colors of those line segments are black in the plot?

Thanks,
Steve

2

Question (1) is about the D3 chart, I suppose, since the chart made with Plot has solid color. I can see two ways to remove the linear gradient:

  1. instead of creating a line path, create a group of connecting line segments.
  2. create a different kind of gradient, where each color is repeated a both the start and the end of the segment.

Code for the second approach:

  const pairs = d3.pairs(data).flat();
  const colorId = DOM.uid("color");
  svg.append("linearGradient")
      .attr("id", colorId.id)
      .attr("gradientUnits", "userSpaceOnUse")
      .attr("x1", 0)
      .attr("x2", width)
    .selectAll("stop")
    .data(pairs)
    .join("stop")
      .attr("offset", (d,i) => x((pairs[i+1] ?? pairs[i]).date) / width)
      .attr("stop-color", d => color(d.category));

Re: the Plot chart, remove the leading ‘#’ in the colors names.

3

That’s exactly what I needed. Thanks!