Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Observable Plot: Symbol Scatterplot

Public visualization

Post on XLinkedIn

Viewing a saved revision (read-only)

afdcd0821eb8428da349297033141dea

Open

Observable Plot: Symbol Scatterplot

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

This example uses Observable Plot 0.6.13 to render a symbol scatterplot of penguin measurements from the `@curran/penguins` dataset. It plots body mass against flipper length, with both the stroke color and symbol shape encoding the species. The plot includes a legend for symbols, a grid, and labeled axes. The chart is sized to its container and supports hot reloading by replacing the existing DOM node. The code imports from `@observablehq/plot` and uses the `Plot.dot` and `Plot.plot` APIs.

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!