overview

A website showcasing the 2020 Trase Yearbook, a year end review of data, findings, trends, and news regarding the impact of global supply chains on deforestation.

I was the technical/development lead for this project, in charge of the data visualization platform and overall site build.

challenge

The 2020 Trase Yearbook needed to make an impactful statement, highlighting new data and research, and conveying the urgency of deforestation driven by global supply chains.

Data visualizations were going to be central to the yearbook. The site would feature over 50 visualizations based off of a set of customized templates and fully bespoke visualizations. All visualizations would need to be editable by the Trase team throughout the build process and after launch.

process

The 2020 yearbook would be a platform to highlight the major trends and research findings that Trase had compiled throughout the year. As such, data visualizations were going to be a major component to that story. Right from the start, we worked closely with the domain experts at Trase to better understand the complexities of their data and start sketching out ideas for different visualizations to include.

Our goal was not just to build visualizations, but to build an extensible system that would let Trase use new data to generate visualizations following a common theme and styling guidelines. Internally, Trase was using ObservableHQ, an online environment with a notebook-like structure for coding and sharing interactive, javascript-based visualizations.

While I had used ObservableHQ for fast prototyping before, this was an opportunity to see if it could be used to create, manage, and host dozens of visualizations in the context of a production website. Furthermore, it meant we could work closely with the data science and visualization team at Trase to iterate on various visualization templates, and share results and comments in real-time.

The site itself was being built on top of a brand new CMS tool developed in-house at Schema (Schema CMS). We built a custom module within the CMS to integrate visualizations from ObservableHQ alongside the rest of the site content. Using this module, the frontend would send an API request to the CMS to receive metadata about the desired ObsevableHQ notebook, and then use that metadata to embed the visualizations live on the site. This enabled Trase to make updates to the notebooks directly, and see those changes immediately reflected on the site.

We completed building the remaining site components and uploaded the site for the final launch. Afterward, we spoke to the ObservableHQ team, and learned this was the first time their tool had been used at this scale to embed visualizations, and were eager to hear our feedback on that process.