Middleman and D3.js
I recently created, along with my colleague Kavya Sukumar, a mapping dashboard for the Vox.com team to help track and report on the ever-changing status of health care in counties throughout the United States. While Kavya focused on obtaining, formatting, and loading the data into Kinto, my role focused on displaying this data. I built out the map and all of it’s versions (U.S. and individual state views), constructed the user-facing dashboard for interacting with the map, and integrated the “save image” ability which saves the map currently in view to a .png that the reporter can then use in stories.
The tool defaults to a map of the United States, built with D3.js, and updates the view based on the options selected by the user in the UI located to the right of the map. The individual state views are rendered by changing the map projection to Mercator (from Albers), zooming in on the specified state, and setting the fill to “none” for all counties not located within that state. Users may also add a title to the image if they so choose.
The image save functionality relies on a slightly tweaked version of pancake.js, “A mini-library for easily flattening SVG and Canvas elements into images on the fly,” in order to allow for the saving of retina resolution images.
While I unfortunately cannot share a link to the live version of this tool, you can read more about how it came to be in this post that Kavya and I co-wrote for the Storytelling Studio blog.