Fork of Observable Plot Starter
This example uses Observable Plot to visualize changes in income inequality across U.S. metropolitan areas from 1980 to 2015. Arrows connect each metro’s position on a logarithmic population axis against an inequality index, with stroke color encoding the change in inequality. The chart includes labeled highlights for select cities, and the code parses CSV data with string-to-number conversion. Plot's `arrow` and `text` marks render the visualization, with dimensions measured from the container to support hot reloading.
AI-generated descriptionUnlocking 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.csswe 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
insetwas removed. - The margins are specified for the legend, otherwise the legend is flush to the upper left corner.
- The
widthandheightare 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!
Comments
Sign in to join the discussion.