Voronoi Diagram of CaBi StationsI was introduced to Voronoi diagrams at today’s Data Visualization Hack Day, at Mobility Lab. Justin Grimes showed a Voronoi diagram of Capital Bikeshare stations he had overlaid on a map of the Washington, DC region: capital_bikeshare_voronoi_diagram.

The map plots each CaBi station. The boundaries are drawn at the half-way point between the closest two stations. When three or more cell boundaries meet, you are equidistant to them all. Inside the cell of a station, that station is the one that’s closest to you.

Justin showed me an interactive example of Voronoi Tesselation on GitHub. The interactive demo adds a new “seed” wherever your mouse is pointing. That point creates a Voronoi cell.

My project for the hacking portion of the day was to adapt that code for the CaBi map. The GitHub code gave me an easy framework which I then just customized for CaBi.

The code happened to use the D3 JavaScript library, which I had never used before. It was easy enough to make sense of the syntax and expand for my project.

I built the list of CaBi coordinates by copying latitude and longitude arrays from one of my other JavaScript CaBi programs. The map that’s displayed in the background came from my custom map-making tool (see Made-to-Order Mapmaking), using bounding-box coordinates from the list of stations.

With just a few customizatins, my Voronoi diagram of Capital Bikeshare stations was born.

Does it have practical applications? It could be used as a tool to determine where to place new stations. The larger the new cell you create, the larger the region that now has a station closer than any of the other choices. And, at a minimum, it’s fun to watch the cells change shape as you move your mouse across the image.

Voronoi Diagram of CaBi Stations

Leave a Reply