Observable

Semi-guided tutorials for data exploration with Observable Plot

Plot Explorations

A semi-guided tutorial for data exploration with Observable Plot.

Staff pick: Plot Exploration - Penguins

Thank you very much for the fantastic tutorial and a fantastic library !!!
 
I would propose the following as a newbie which might help in the tutorial : 
- A template of a plot may be used and along the way the relevant portions of it to produce the visualizations could be filled in. This at least to me helps me have a clearer thought path and helps in literally constructing visualizations by their various bits and pieces and parameters.
- I would completely abandon using Plot.dot or any other mark directly and force a consistent Plot.plot(options) approach.  

A sample basic template could be : 
Plot.plot({
  facet: {},
  marks:[ ],
  x : { },
  // marginLeft: 80,
  // height: 300,
  // width: 300
})

Thank you !

Ioannis Tzolas

Note that the <style> element gets wrapped by <span>. If you want the element to be directly visible/accessible, you can simply remove the closing </style> tag (or ensure that there are no characters after it).

Fabian Iwand

I don't understand what z: d => d.sex + d.species does in the solution, if I remove it nothing seems to change

You are absolutely correct: they are of no use here since faceting already groups the data by sex+species. Thank you!

Thanks for the notebook - I am very excited to learn Plot!
It seems the link is outdated, probably the current one is https://observablehq.com/collection/@observablehq/plot ?

Thanks for the tip! The link has been updated.

Mike Freeman

confusing myself trying to make this interactive (trying to test it out on Question 9)

Ian Johnson

the mix of html and md is tricky—it's because of the nested structure of <details><summary>, but since we're going to abandon the nesting I think we can simplify the answer() code.

The title attribute does not seem to produce anything.

David Kirkby

Hey David! The title attribute is an HTML feature for a simple tooltip. If you hold your mouse over a single point and wait a few seconds, you should see the information show up in a simple hover.

Ah, ok, thanks.  I did look for a tooltip, but wasn't patient enough to wait the 1-2s delay.  Perhaps "tooltip" would be a more intuitive name (or alias) for users w/o an html background.  Is there a way to produce a static inset legend?

We're working on automating color legends. There are already ways to add them, but they're a bit too complicated for this tutorial. (Tooltips are coming too!)

Wow! Tooltips and auto legends would be awesome!

Ashish Singh

Why does a loop not work to output multiple dimensions? E.g.
```
{for (let x of ['body_mass', 'flipper_length']) {
Plot.plot({
  marks: [
    Plot.frame(),
    Plot.dotX(data, {x: x, fill: "black", fillOpacity: 0.2}) // replace … by the field’s name, e.g. body_mass
  ]
})
}}
```
always outputs "Undefined"

Peter Bowyer

Plot.plot(…) computes a svg node, which needs to be inserted in the DOM. (Observable will do it if it's the return value of the cell.)
Suggestion: 
html`${['body_mass', 'flipper_length']
  .map(x =>
    Plot.plot({ marks: [Plot.frame(), Plot.dotX(data, {x: x, fill: "black", fillOpacity: 0.2})] })
  )}`