Skip to main content
SimilarExport ZIP
100%

Observable Plot: Diverging Color Scatterplot

✓ Published0🌍 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

This was ported from Observable: Diverging color scatterplot, with a few modifications mainly to set up the margins.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Temperature: from ObservableHQ

This visualization shows monthly global temperature anomalies from 1880 onward, with individual data points colored by anomaly value using the BuRd color scheme. A horizontal rule marks the zero line, and a moving average line, computed via Plot.windowY(12), smooths the yearly pattern. The example uses Observable Plot for rendering and d3.csv to load the gistemp dataset, with d3.utcFormat handling year tick labels on the x-axis.

Ssagar.s.savant4@gmail.com
82% match
Loading thumbnail…

Temperature: from ObservableHQ

The visualization displays monthly global temperature anomalies from 1880 onward as a dot plot, with a horizontal reference line at zero and a moving average line. The dots are colored using a blue-red scheme to encode anomaly values. Built with Observable Plot and D3, the code loads data from `gistemp.csv`, converts dates and values, and uses `Plot.plot`, `Plot.dot`, `Plot.lineY`, and `Plot.ruleY` to render the chart with labeled axes and grid lines.

SStefan Apostol
81% match
Loading thumbnail…

Observable Plot Starter

An Observable Plot starter demonstrates how to build an arrow variation chart, tracking changes in population and income inequality across U.S. metropolitan areas from 1980 to 2015. The `@observablehq/plot` library renders logarithmic x-axes, a color legend, and curved arrows whose stroke color encodes inequality shifts. It loads CSV data with `metros.csv`, converts strings to numbers, and dynamically sizes the plot to the container via `container.clientWidth` and `container.clientHeight`. The code includes hot-reloading support by replacing the container's first child on each run.

CCurran Kelleher
74% match
Loading thumbnail…

Observable Plot Scatterplot with Color

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.

CCurran Kelleher
73% match
Loading thumbnail…

Observable Plot: Symbol Scatterplot

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.

CCurran Kelleher
72% match
Loading thumbnail…

Observable Plot Scatterplot with Color

This example shows how penguin body mass and flipper length relate, with points colored by species using the Observable Plot library. It plots the penguins dataset from @curran/penguins, rendering dots with `Plot.dot` and mapping the `stroke` channel to the `species` field, while a legend appears via a `color` option. The chart is sized to its container and includes a grid and inset padding. The code also handles hot reloading by replacing the existing DOM node, and it overrides default figure margins in CSS.

CCurran Kelleher
72% match
Loading thumbnail…

Hello Observable Plot

This example displays the classic Iris dataset as a scatter plot, mapping petal length to the x-axis and petal width to the y-axis, with points colored by species. It uses Observable Plot’s `plot` and `dot` functions, called from the UMD build, to render the visualization inside a full-window container. Data is loaded asynchronously via `d3.csv` with `autoType`, and D3 v7 is included alongside Plot to handle the fetching and type conversion.

CCurran Kelleher
70% match
Loading thumbnail…

Cars Scatter Plot

This visualization displays global surface temperature changes since the 1700s using a heatmap of monthly temperature variances. Each cell represents a year and month, colored on a gradient from mint to dark red based on temperature deviation from a baseline. The code loads data from a JSON file via `d3.json`, renders SVG rectangles with scales created using `d3.scale.linear`, and includes interactive tooltips. The visualization also incorporates D3 axes, a time scale for month labels, and computed color thresholds for temperature ranges.

Vvaynexie
69% match