Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Observable Plot: Diverging Color Scatterplot

Public visualization

Post on XLinkedIn

Viewing a saved revision (read-only)

9778aed9e32a46e7879fcd64094eb5e1

Open

Observable Plot: Diverging Color Scatterplot

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

This example visualizes global surface temperature anomalies over time, with each dot representing a monthly observation. The diverging color scale (BuRd) maps positive and negative anomaly values to red and blue, respectively, while a ruleY marks the zero baseline. Built with Observable Plot, the chart dynamically sizes to its container and uses the `@curran/gistemp` dataset. The color legend is positioned in a dedicated margin area, and the y-axis labels the anomaly in degrees Fahrenheit with explicit positive/negative formatting.

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!