Instantly share code, notes, and snippets.

Last active May 3, 2018 16:04
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

View this gist at bl.ocks.org

This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
 Chicago Ward Remap Outlines
2005-2014 2015-2025
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters