Fork of Observable Plot Starter

100%

Fork of Observable Plot Starter

✓ Published0🌍 Public

Last edited Feb 7, 2024

Created on Feb 7, 2024

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.

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…

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

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

73% match

Loading thumbnail…

Fork of Analysis using scatterplots

This visualization combines scatterplots and animated bar-like line marks to explore median family wealth in the US from 1983 to 2016, split by race. Users can switch between White, Black, and Hispanic households via a dropdown menu, triggering a D3 transition that updates both the circles and vertical lines. The data is sourced from the Urban Institute and US Census via TidyTuesday, normalized to 2016 dollars. The code uses D3 v6 APIs such as `scaleLinear`, `axisLeft`, `axisBottom`, and `transition`.

Ggrigoriu-stefan-iulian

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

67% match

Loading thumbnail…

Fork of Analysis using scatterplots

An interactive scatterplot visualizes median family wealth in the US from 1983 to 2016, split by race (White, Black, Hispanic) and normalized to 2016 rates. A dropdown menu switches between racial groups, with animated transitions updating both the scatterplot circles and vertical bar markers. Data comes from the Urban Institute and US Census via the #TidyTuesday project. The visualization uses D3.js (v6) APIs including `scaleLinear`, `axisBottom`, `axisLeft`, `transition`, and custom reusable chart functions. SVG rendering displays the plotted points and axes.

Ttopnep

67% match

Loading thumbnail…

Fork of Pie Chart

This fork of Observable’s pie chart example embeds an interactive D3.js (v5) visualization via an iframe into a minimal HTML page. The chart renders the U.S. population by age group, using `d3.pie()` and `d3.arc()` to draw wedges, with a spectral color scale and labels positioned by `d3.arc().centroid`. Data comes from a local CSV file. The styling is handled with CSS, and the code leverages Observable’s `PieChart` function.

Zzjutkarma

66% match

Loading thumbnail…

Fork of Hello Observable Plot

This example renders the classic Iris dataset as a scatter plot using Observable Plot, with petal length on the x-axis, petal width on the y-axis, and species encoded by stroke color. The visualization fills the entire browser window by setting the plot’s width and height to the inner dimensions of the viewport. The code loads data with `d3.csv` and `autoType`, then builds the chart with the `plot` and `dot` functions from the Observable Plot UMD bundle, while relying on D3 v6 for data parsing.

Ppreethamkesa

66% match

Loading thumbnail…

Fork of Analysis using scatterplots

An interactive scatterplot and bar chart explore median family wealth in the US from 1983 to 2016, with data from the Urban Institute, US Census, and TidyTuesday. A dropdown menu filters the visualization by race (White, Black, Hispanic). The scatterplot uses animated circles, while the bar plot shows the same data as lines, using d3’s scaleLinear, axisLeft, axisBottom, and transition APIs. The SVG rendering animates transitions when the race selection changes.

Ccssergio

66% match