Skip to main content
100%

Choropleth with Animated Stripes

✓ Published0🌍 Public
MMTClass
Last edited Apr 23, 2017
Created on Apr 23, 2017

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 description

Block-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:

  1. Ideas over implementation. Do something novel, don't sweat the details.
  2. No more than two hours can be spent on coding (give or take).
  3. Every. Single. Day.

Previously

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>

mit Licensed

Similar vizzes