scc 2018

In order to prepare interactive figures for a Nature Climate Change paper¹ on the social cost of carbon, it was necessary to show a large quantity of country-level data under numerous parameters.

This visualization microsite was prepared using create-react-app but instead of being backed by a standard database, the data pipeline for the paper is reused to create a series of static csv files available to the application. at runtime, the application serialize the visualization parameters to map to a static csv path which is loaded asynchronously and then used to update the visualization. As a result, it's possible to present a large number of scenarios performantly as well as link to individual scenarios or specific visualizations.

D3 was used to correctly scale the data and for geographic visualization, but the majority of the display is handled entirely by a few reactive svg components rendered by react js. As new csv data arrives for a selected scenario, the visualization tweens itself to new values using a combination of react motion and css animations. As the parameters are modified, the address bar's url is updated allowing visitors to share links back to specific visualizations.

the visualization's code repository lives on the country-level-scc github org and the you may access the visualization on the scc paper microsite.

Developed in 2018 using React, FlowJS, D3, papaparse, matchsorter