Legends from marks

Community Help
1

Hi everyone, glad to be joining this community around the wonderful Observable!

As a newcomer to Observable, I am struggling with legends. I understand how to put legends based on color or opacity from a dataset, as in many of the examples our there.

But is there a way to (manually?) build legends from the marks?
Concretely, how can I put legends on the following example (from @observablehq/plot-linear-regression):

Plot.plot({
  marks: [
    Plot.dot(cars, {x: "weight (lb)", y: "power (hp)", strokeOpacity: 0.5, r: 2}),
    Plot.linearRegressionY(cars, {x: "weight (lb)", y: "power (hp)", stroke: "steelblue", ci: 0.95})
  ]
})

I would like a legend that shows that:

  1. the dots are data points,
  2. the line is the regression line and
  3. the shaded regions are the 95% confidence bands for the regression line.

Thanks!

1 Like
2

Welcome!
I don’t think there is a way to make a legend like that, but I often use a caption to explain how to read the graph.

Plot.plot({
  marks: [
    Plot.dot(cars, {x: "weight (lb)", y: "power (hp)", strokeOpacity: 0.5, r: 2}),
    Plot.linearRegressionY(cars, {x: "weight (lb)", y: "power (hp)", stroke: "steelblue", ci: 0.95})
  ],
  caption: "The line is a regression line with shaded regions showing the 95% confidence bands."
})
1 Like
3

Thanks a lot for the quick reply! The caption helps a bit, but I would really prefer a legend. I wonder if I can do it with some manual javascript trickery?

5

Can you describe (visually) what you want to achieve? There are lots of possibilities within Plot: you could add text (even multiline text) and other marks, or even another chart as part of the main plot… you could also create a custom mark that return a foreignObject containing any type of HTML.

1 Like
6

Thanks! I was thinking something like this:

legengplot
legengplot1927×1276 178 KB

7

You can definitely just build that legend in Plot itself. I guess the following is getting kind of close, though I’m not quite sure how to generate your outlier curves off the top of my head:

The typeset mathematics is probably the trickiest part here. You can read more about that in this and that.

3 Likes
8

Sweet, got it!