Greater Boston Climate Vulnerability Assessment Website Launch

December 11, 2019

Today my team at MAPC launched an interactive website to share our organization’s research on climate vulnerability in Greater Boston. This website was a true sprint: we only had a week to build it. However, we learned some cool things along the way.

The first thing we learned is how to pre-project maps in D3.js. This is an important skill if you want to display a large amount of GeoJSON on a page because many user’s browsers will crash or slow down if they need to process too much GeoJSON. If your D3 map is not working, pre-projection might be the answer to your problems.

The second we learned was the value of building a repeatable data transformation pipeline. During the development process, we went through tens of versions of the source data which arrived as a shapefile from our researcher. If we had to re-create the GeoJSON transformation process it could have taken hours at a critical moment to update the data. Instead, we spent some time upfront creating a pipeline of a couple of shell commands that reliably transformed the source shapefile into GeoJSON. A good data transformation pipeline makes iteration a wonderful luxury.

Finally, GitHub Pages with Jekyll allows for rapid iteration, prototyping, and deployment. For a site that displays content that rarely changes or updates, GitHub Pages and Jekyll is a great choice. Using Jekyll allows us to organize our CSS with Sass and to quickly preview our local changes with the jekyll serve --livereload command. If you want to quickly build a static website, these tools minimize the distance between code and production.

Want to get posts like this in your email?

This work by Matt Zagaja is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License.