The wards in Chicago were recently remapped and I was mesmerized by the idea of creating an interaction that would animate
the transition from the old to the new wards. I shortly found out that tweening polygons in a non-intersecting and interlocked
fashion is a complicated topic. I’ve done a lot of reading about the math and research that has been done in this space and
found a few interesting theories which I would like to implement in a future version. Currently, the
morphing/tweening/interpolation is done with an array interpolator. Unfortunately, this technique causes the intermediate
polygons to self-intersect and morph inefficiently. Ideally, I would overlay these polygons on a slippy map and there
would be no gaps between the polygons during the morphing.
Overall, I am happy with the way this prototype came out and how it highlights the need for more robust polygon morphing. I am excited to see what the map transition will look like when a more fluid animation is implemented.
- Drag the slider to morph the wards
- Click and drag to move the map
- Use the mousewheel to zoom
- Click on a ward to change the shading
- Click the Chicago star to change the layout
- Hover over the ward to see its number and to highlight the ward
- Click one set of the years to animate the transition between the wards
- Start in map view
Points of Interest
- The 2nd ward travels away from where it once was and now encompasses an entirely different area.
- The morph of the 9th ward demonstrates why using a shortest path vertex transformation is misleading.
- There is a hole in the 2005 19th ward that will be removed in 2015.
- The morph of the 19th ward is comically inefficient and demonstrates how inadequate a naive interpolater is.
- The 41st ward(O’Hare) is huge. It dwarfs the 44th ward which I previously thought was much bigger.
- When you click the star to switch to the map view, click a ward to change the ward color to black, and zoom in; you can see how the polygon simplification causes small gaps between the wards where more vertices would have been required to make the edges seamless.
- Every ward’s boundary changed.
- The GeoJSON files were simplified with ogr2ogr using a tolerance of .001 to improve rendering performance
- The 19th and 41st wards were reduced from a MultiPolygon to a Polygon to make morphing work with the array interpolator
View this gist at bl.ocks.org