Voronoi intensity mapping with R and d3: Part 202 Mar 2015
In the last post, we focused on how to generate a voronoi diagram from a set of points in R, clip the voronoi diagram to a polygon - in this case the city boundaries of Philadelphia - and write all of this goodness out to geojson.
What we’re going to do now is to focus on how to get this information into D3 and to plot it like so:
The first thing I did was to convert my voronoi polygons into topojson to make a smaller, faster-loading file using Mike Bostock’s topojson package:
So, the first housekeeping thing I did was to make a div for the map to hang off of:
Then, using a d3 selector, I go ahead and create an SVG element attached to the map div:
I used Mike Bostock’s queue function to pre-fetch the data before calling the function that will go ahead and draw the map. We’re going to load both a topojson full of the voronoi polygons we just created and the geojson from OpenDataPhilly with the configuration of Philadelphia neighborhoods:
Now that we’ve gotten everything loaded up, it’s time to do what we came here to do: make the map. But before we do this, we have to fix the projection so that our map is scaled and centered properly. I took the approach suggested in this stackoverflow post, to start with some default values and then center and shift so that the map is centered and takes up the maximum space within the area provided:
Note the call to Math.abs. This is because the polygon.area() function will return a negative value for area if vertices are listed in a counterclockwise fashion. So this ensures we get a positive value for area.
Now that we’ve gone ahead and attached the density values to each polygon, we can calculate the color scale to vary from white to red. There are decidedly more elegant ways to do this, but this is what I did:
Finally, we’ll attach our voronoi polygons to the DOM:
One thing that I wanted to be able to do was to show the neighborhoods corresponding to a given outline to make it easy to understand where the most concentrated risk was. To do this, I used the d3 tip package, which makes it easy to make simple tooltips. You can add css, etc, but I went with a simple html one. So, first you make the tooltip object and tell it what to do with the data. In my case, I just want it to pop-up the name property. After we make this, we have to call it to attach it to the DOM and define some functions that will be called on mouseover and mouseout:
Note that the mouseover and mouseout functions manipulate the class of the polygon. Changing the class to ‘neighborhood–show’ makes the outline red like so:
An important thing to note here that I didn’t understand at first, is that ‘pointer-events:all’ lets us track mouseovers even when the polygon is unfilled. Otherwise, the mouseover function will only be called when the mouse is over the very thin borders of the neighborhood polygons.
And now that we’re all ready for them, we’ll go ahead and attach our neighborhood outline to the DOM:
And that’s pretty much it for the Voronoi intensity map!
Again, this one is definitely a work-in-progress and by no means a perfect implementation. But it does the job pretty well and was not all that difficult to cobble together. In the future, a better implementation would probably pre-compute the density values and store them in the input topojson, or cache them server-side. For an SVG this complex, it might even make sense to pre-render the SVG element using a headless browser like PhantomJS and then just send that to the browser.
Another valid knock against this kind of map is that it doesn’t give a good sense of proportionality. We see areas with a high raw number of homicides on the map, but it’s not clear how these relate to some kind of baseline, whether it’s population density or some historical stats, like murder rates from the 1990s. This kind of spatial relative risk mapping is an interest of mine and something I hope to explore soon using these kinds of techniques.