Observable Plot Starter

100%

Observable Plot Starter

✓ Published6🌍 Public

Last edited Jan 24, 2024

Created on Jan 19, 2024

Forked from HQ

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.

AI-generated description

Unlocking Observable Plot with VizHub's hot reloading patterns!

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!

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Observable Plot Starter

This example uses Observable Plot to visualize changes in income inequality and population across 59 US metro areas from 1980 to 2015. It renders a scatter plot with logarithmic x-axis, where each city is an arrow mark showing the shift from its historical to current values. A color legend encodes the change in inequality, and labels highlight select metropolitan areas. The chart is built with `Plot.plot`, `Plot.arrow`, and `Plot.text`, reading data from a CSV file, with margins explicitly set for the `figure` element and dimensions computed from the container for responsive refreshing.

RRenato Hermoza Aragonés

88% match

Loading thumbnail…

Observable Plot: Diverging Color Scatterplot

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.

CCurran Kelleher

74% 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

73% match

Loading thumbnail…

React + Observable

This example demonstrates how to embed an Observable Plot visualization inside a React application. It displays the classic Iris dataset, plotting petal length against petal width with points colored by species. The code uses `Plot.plot` and `Plot.dot` from `@observablehq/plot`, while React's `useRef` and `useEffect` manage the DOM element. Data is loaded asynchronously via `d3.csv` with `autoType`, and the chart fills the full browser window.

RRiderman de Sousa Barbosa

71% 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…

Observable Plot Scatterplot

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.

CCurran Kelleher

69% match

Loading thumbnail…

HQ

This chart visualizes changes in population and income inequality across U.S. metropolitan areas from 1980 to 2015. It uses a logarithmic x-axis for population and a reversed y-axis for inequality, with arrows indicating the direction of change for each metro, colored by the magnitude of inequality shift. Built with D3.js v5 and the Observable Plot API, the visualization encodes data from the `metros.csv` file, with labels for select metros and a color legend for inequality change.

SStefan Apostol

69% 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

67% match