Find inspiration and techniques to create beautiful and appropriate charts with Observable Plot. This collection highlights best practices and real use cases.

Observable

Plot Examples

Experimental stuff with Observable Plot: plugins, hacks, debugs… guaranteed to break sooner or later.

Plot Experiments

Plot

Hi Fil, is there any way I could access the regression parameters via Plot? Does it also make sense to access the plugin data via Plot API? I can always rerun the regression. However, it would be convenient to explore the data via Plot and eventually see those parameters.

Radamés Ajna

As you can see in the code above, the variable reg is the result of the regressor applied to the data in the current data group (grouped by facet and z). We push its points d into the points array, which is then returned as the new data; the parameters are lost. I don't see how it could be part of the data flow, but we can do something out of band, for example, by setting a mutable, sending a console.log, or pushing the params to an options.params array.

Here's how you can do this options.params business; add this line: 
          const reg = regressor(I);
+         if (options.params && options.params.push) options.params.push(reg);
          for (const d of reg) {
 
Then call:

{
  const A = [];
  Plot.line(
    penguins,
    Plot.regression({
      x: "culmen_length_mm",
      y: "culmen_depth_mm",
      strokeDasharray: [1.5, 4],
      strokeWidth: 1.5,
      params: A
    })
  ).initialize();
  return A;
}

(or call the full Plot, but return A)

and you'll get:
[ [ ...points, 
  a: -0.08502128077714582
  b: 20.885468318531395
  predict: ƒ(x)
  rSquared: 0.0552498518623743
] ]

thanks, Fil, that's a neat trick! My mental model for Plot was more like a viewof, expecting to set current state values to the generated chart.

There's no such thing yet, but generally "debugging" is something we want to explore.

The d[z] = Z[I[0]] is cheating a bit 😉 since it requires that the z channel be specified as a string. IN this alternative prototype I pass through the data and generate an index such that other channels can be derived on the same data:

https://observablehq.com/d/9fc6187b5f9d2293

Mike Bostock

Can you add the equation and R^2 for each line to the plot?

Definitely something I'd like to have (the issue is listed as the todo in the paragraph just below), but I don't really know how. The underlying library returns R^2, and in a comment below I've explored how to return it—but I'm not sure that's enough to draw the shape.

I wonder, how should we use this plugin on the wild?

Andres Snitcofsky

in Observable you can probably just do:
> import {Plot} from "@fil/plot-regression"

If by "in the wild" you refer to some other dev environment you'll need to adapt it a little. Let me know if you have a more specific question?