Zoomable Choropleth
A zoomable choropleth of U.S. unemployment rates by state and county. Clicking a state zooms the map to that state, revealing county-level data with smooth animated transitions; clicking a county returns the view to the full country. Built with D3 v4, it uses `d3.geoPath` with an Albers projection, `projection.fitExtent` for zooming, and `transition` for animations. A threshold color scale encodes unemployment values from BLS data, and county shapes are rendered as SVG paths.
AI-generated descriptionBlock-a-Day #11. Clicking on a state zooms the map to that state and shows county-level data.
Data Sources: BLS.
What I Learned: Trying out the new projection.fitExtent(). In the process, learned about adaptive resampling, which can break interpolation by changing the number of coordinates in a path at different zoom levels. Fixed the resulting bug by setting projection.precision() to 0, effectively turning off resampling.
What I'd Do With More Time: Finding a way to include Alaska and Hawaii is an obvious next step (albersUSA didn't immediately work with this technique). Could probably use more detailed county shapefiles.
Block-a-Day
Just what it sounds like. For fifteen days, I will make a D3.js v4 block every single day. Rules:
- Ideas over implementation. Do something novel, don't sweat the details.
- No more than two hours can be spent on coding (give or take).
- Every. Single. Day.
Previously
- Map to Force-Directed Graph
- Brushable Scatterplot/Choropleth
- Treemap Bar Chart
- Triangular Scatterplot
- Choropleth with Animated Stripes
- Collatz Conjecture
- Bouncing Logo
- Rectangular Collision Detection
- Demers Catogram
- Gooey Exploding Scatterplot
forked from <a href='http://bl.ocks.org/cmgiven/'>cmgiven</a>'s block: <a href='http://bl.ocks.org/cmgiven/d39ec773c4f063a463137748097ff52f'>Zoomable Choropleth</a>
forked from <a href='http://bl.ocks.org/pmia2/'>pmia2</a>'s block: <a href='http://bl.ocks.org/pmia2/4b37a90a24d1004c14c8e9ceae826342'>Zoomable Choropleth</a>