Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Observable Plot Scatterplot with Color

Public visualization

Post on XLinkedIn

Viewing a saved revision (read-only)

7b61329fdfff4292b80b3ee8316b1e26

Open

Observable Plot Scatterplot with Color

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

This example displays a scatterplot of penguin measurements, with each dot positioned by flipper length and body mass, and colored by species. Built using Observable Plot’s `Plot.plot` API, it renders dots via `Plot.dot` and includes a legend, grid, and margins configured through the `color` and `inset` options. The chart reads data from the `@curran/penguins` package and dynamically resizes to its container’s dimensions.

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!