Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Observable Plot Scatterplot

Public visualization

Post on XLinkedIn

Viewing a saved revision (read-only)

54d81549c0914351872ac95d19a1d1f4

Open

Observable Plot Scatterplot

0 stars2🌍 Public
CCurran Kelleher
Last edited Jan 22, 2024
Created on Jan 22, 2024

This example uses Observable Plot to render a scatterplot of penguin measurements, with flipper length on the x-axis and body mass on the y-axis. The plot includes a grid, an inset margin, and automatically sizes to fit its container. The code imports the `Plot` library and a penguins dataset, then calls `Plot.plot` with a `Plot.dot` mark to visualize the data.

AI-generated description

Unlocking Observable Plot with VizHub's hot reloading patterns!

<video autoplay="" loop="" muted="" width="100%"> <source src="https://vizhub-images.s3.amazonaws.com/hot-plot.mp4" type="video/mp4" /> </video>

This example was ported from Observable:Arrow variation chart.

A few modifications were made to make it work outside of Observable:

  • In styles.css we set the margin of <figure> to 0, because without doing that the user agent stylesheet sets some strange margins.
  • The margins are specified for the plot, and the inset was removed.
  • The margins are specified for the legend, otherwise the legend is flush to the upper left corner.
  • The width and height are set based on the measured container, so it should be possible to change the size of the container and have the chart update properly.

Thanks to Stefan Apostol for the original HTML port (which this is forked from) and the inspiration to make this happen!