Choropleth with Animated Stripes
This choropleth visualizes the poverty rate for families with children in Maryland counties, with animated striped overlays expressing the margin of error. The map uses D3 v4’s `d3.geoPath`, `d3.geoMercator`, and `topojson` to render county shapes, while a stripe pattern and mask animate fill colors between the upper and lower confidence bounds using chained transitions. Users toggle between one-year and five-year ACS estimates. Data comes from the 2014 American Community Survey.
AI-generated descriptionBlock-a-Day #5. Experiment with using patterns and animation to show the margin of error on a choropleth. Stripes periodically pulse to the extremes of the margin of error to show uncertainty. This is one where the only way to see if it works is to build it; unfortunately, the idea worked better in my imagination.
Data Sources: 2014 ACS
What I Learned: I might have used an SVG mask before in a visualization project, but I had certainly never used the combination of pattern and mask. Drew heavily upon John Schulz's block demonstrating this technique. This is also my first time using Mike Bostock's pattern for chained transitions.
What I'd Do With More Time: Not sure. This isn't as effective as I'd hoped. Might be a dead end.
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
forked from <a href='http://bl.ocks.org/cmgiven/'>cmgiven</a>'s block: <a href='http://bl.ocks.org/cmgiven/09140e2ac8119340048f62d1b241977e'>Choropleth with Animated Stripes</a>