Is there any way (inside Plot) to add a legend to a plot with two lines derived from the same data?

[llimllib]

I put together an observable to explain what I mean: https://observablehq.com/d/8275ce1053510e0f

Is there any way to use plot to generate a legend for these two lines?

In the particular use case I'm working on, there's no way ahead of time to know how to place labels

[mythmon]

There are two things that you'll need to change to get an automatic legend. First, you have to turn it on, by adding color: {legend: true}. Second, that won't work when you specify colors directly in your marks. Instead you have to let Plot figure those out. You can replace the stroke specifiers with something like stroke: d => "length".

Doing those two things results in a final result of

chart = Plot.plot({
  color: {legend: true },
  y: { label: "mm" },
  marks: [
    Plot.lineY(sortedpenguins, {
      x: "flipper_length_mm",
      y: "culmen_length_mm",
      thresholds: 12,
      stroke: d => "depth",
    }),
    Plot.lineY(sortedpenguins, {
      x: "flipper_length_mm",
      y: "culmen_depth_mm",
      thresholds: 12,
      stroke: d => "length",
    })
  ]
})

which looks like this:

I've sent a suggestion to your notebook with those changes.

[mythmon]

And if you want to get your original colors back, you can specify that in the color section: color: {legend: true, range: ["red", "orange"]}.

[llimllib]

Thanks! That's super helpful, I stared at the docs for a long time without figuring that out.

(I had the color: {legend: true} bit, but I never put together that specifying the colors explicitly prevents you from using the legend. Maybe that restriction could be removed?)

[Fil]

There is no such restriction; however, when you specify colors directly, Plot has no way to retrieve the information about what they mean. But if you wanted, you could be explicit:

chart = Plot.plot({
  y: { label: "mm" },
  color: {
    legend: true,
    domain: ["red", "blue"],
    range: ["red", "blue"],
    tickFormat: (d) =>
      d === "red"
        ? "cagtegory1"
        : d === "blue"
        ? "category2"
        : "you shouldn't be here"
  },
  marks: [
    Plot.lineY(sortedpenguins, {
      x: "flipper_length_mm",
      y: "culmen_length_mm",
      stroke: "red"
    }),
    Plot.lineY(sortedpenguins, {
      x: "flipper_length_mm",
      y: "culmen_depth_mm",
      stroke: "blue"
    })
  ]
})

Since it's better to follow a pattern where the data drives the scales, we don't give this as an example.