IMG_20200908_114948.jpg

Blog

Voronoi Places

Hey all you cool cats and kittens,

Back in 2017 when I moved to Munich, I found myself walking six minutes to the Ubahn (subway) station every morning to work and every evening coming home. Six minutes isn’t terrible, but it’s still quite a bit, especially in the snow and uphill both ways.
I found myself frequently wondering: “Is this really the closest station? Am I closer to another? Do other people have it worse than me?”

What it really boiled down to was this:
Given the other residents who are in my “Ubahn neighborhood”, how does my walking commute compare to theirs?

Y’all think about this weird stuff when you’re commuting to work, right? 😅

Okay so naturally the first question is “what defines your Ubahn neighborhood?”, and like all good problems, the first question immediately leads to a rabbit hole that consumes your brain for two years until you’re under quarantine and have the time to chug coffee and actually do it.

A few years ago when I was a young lad (2012), I came across this article by the New York Times which had a beautiful data visualization about the delightfully boring US presidential race. I also came across this article describing how the visualization was made. It turns out the article and visualization were written by a NYT employee - Mike Bostock - who is also the author of D3.js, a very popular charting library for Javascript. So yeah, Mike is like, a really smart dude.

Well that got me looking into these things called Voronoi Diagrams, which are “partitions of a plane into regions close to each of a given set of objects”. In non-wikipedia terms, I would describe it as “Boxes around points, where the box lines indicate the midpoint between two points. So if you’re in a box, you’re closest to the point in that box. Once you cross a line, you’re now closer to the point in that box.” Heads up if it isn’t obvious: I didn’t major in math.

So this Voronoi thing hits me while I’m spending two years walking to the subway, and finally I think “Okay, how hard would it be to just run some Voronoi library on top of a Google map to determine my Ubahn neighborhood?”. Turns out, not impossible, but not a walk in the park.
Besides, I was looking vor-o-noi project anyways. 🥁🥁🔔

For all the geeks out there, you can find the heavily-commented source code of what’s below in the github repo, along with a shitty readme of how it’s hosted (iframe below). The real challenge of this project was learning how to use Google APIs with SVGs with D3 with the d3-delaunay library, and luckily I didn’t have to deal with any algorithms.

Luckily for all the normal non-nerd humans, I won’t go into that. I’ll just get to the point:

I wrote some Javascript to overlay Voronoi diagrams of Google Places on top of a Google Map to justify my complaining. Turns out, I’m definitely in a corner of my Ubahn neighborhood’s Voronoi polygon, although, definitely not as bad as others across Munich. On the other hand, my apartment is in a really great location when it comes to beer gardens. 🍻

In order to make this approachable and fun for you (let’s be honest, it’s not that fun), I added two search boxes. The top sets the location and the bottom sets the keyword of place you’re searching for. I’ve included some suggestions too.

Have fun and post a comment / contact me if you come across anything cool or broken.