brick.codes - Drawing MassGIS Data

Visualizations

Recently I've enjoyed playing around with some MassGIS Data - speficially, the MBTA Rapid Transit data as well as the census data, for city locations.

Here's what it looks like if we draw massachusetts: The entire state of Massachusetts, drawn from polygons mapping to each city

Now, let's zoom in and overlay the MBTA data: A chunk of the east coast of Massachusetts, with the MBTA subway routes drawn on top

We can calculate the voronoi diagram, and draw that as well: The same map of the MBTA subway routes, with lines composing a voronoi diagram drawn on top O(n log n) voronoi algorithms (such as Fortune's) are hard, so eventually I eneded up implementing a O(n²) algorithm which you can find described here.

We can use this diagram to generate a sort of heatmap, showing proximity to the nearest subway station: The same voronoi diagram, but each cell containing a radial gradient from warm to cool colors I'm still not happy with this visualization. I didn't want to draw the Voronoi diagram lines, but due to what I think are SVG rendering nuances, I couldn't get the gradients to line up perfectly no matter how hard I tried. The voronoi lines serve to mask the edges.

Compression

It took me awhile to put this page up, because I wasn't happy with the size (in bytes) of the SVG files I was generating. This page would have been many megabytes more than it already is! I was able to use a combination of two things to get the size down

When outputting the SVG files, limit the floating point output accuracy to two decimal places
Use the Ramer–Douglas–Peucker algorithm to simplify both the MBTA and Census geometry

By reducing the number of bytes per point we are outputting and outputting far fewer points, we get a huge space reduction. If you'd like to see the svg files without the RDP algorithm applied, replace "lq" with "hq" in the URL path for the above SVG images.