Chicago Ward Remap Outlines

Created by Christopher Manning

Summary

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.

Controls

• 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.

Notes

• 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

References

• http://en.wikipedia.org/wiki/Community_areas_in_Chicago#Wards
• Chicago Tribune side-by-side map of 2005 and 2015 wards
• Christian Marc Schmidt’s Community Fragments project inspired the layout

View this gist at bl.ocks.org