The Amazing Self-Drawing Maps

This animated self-drawing map of Chicago is as much an artistic statement as it is a map.

There's no explanation attached to this map so I'm having to do a little guess work here. The map is called Divvy Routes and the map that emerges looks like Chicago. My best bet then is that this is a map of Chicago created by drawing routes between bike pick-up and bike drop-off points on the Divvy bike sharing network in Chicago.

The JavaScript code for the map contains variables called 'drawLinesByHour' and 'drawLinesByMinute' so there is presumably a time element to the routes being drawn on the map. I assume therefore that the map shows bike usage over a period of time.


If you like self-drawing maps then you should also have a look at Sketch Map. Sketch Map is a clever interactive map which uses D3.js and Walkway.js to sketch a road map one little bit at a time. Having a look under the hood of Divvy Routes it appears that it also uses D3.js to create the animated lines on the bike route map of Chicago.

Zoom in and out on Sketch Map or pan around and you can observe how the roads and transit lines are sketched out in real-time. If you want to have a play around with this yourself the code for Sketchcart is available under an MIT license on Github.