Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Observable Plot Starter

Public visualization

Viewing a saved revision (read-only)

031c6f55789745ee8a26bf872e571b08

Observable Plot Starter

0 stars7🌍 Public
CCurran Kelleher
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

Thanks to Stefan Apostol for the original HTML implementation and inspiration!