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.