Tracing sustainable supply chains.

Many of us enjoy eating a big burrito stuffed with beef or tofu, but how often do we consider the journey that the food in our meals has taken? Where was it grown? Who exported it? What were the environmental impacts of its production? These questions can be answered by Trase, a platform that maps the global supply chains driving deforestation. Developed by the Stockholm Environment Institute and Global Canopy Programme, Trase aims to help companies, financial institutions and governments understand their social and environmental impacts.

At the heart of Trase is a beautiful, interactive sankey diagram that visualises the export and import of 13 commodities that are linked to deforestation, including soy, beef, coffee, and cocoa. The datasets that feed this visualisation are immense and we had to resist the urge to cram in as many features as possible. Instead, we carefully selected features that would allow people to explore the complex relationships between the data points without being overwhelmed. Pushing technology to the limits, the sankey diagram is the perfect way to fully appreciate the global demand for agricultural commodities.

A major investigation by The Guardian and the Bureau of Investigative Journalism using Trase data discovered that Brazilian beef linked to deforestation was being sold by a company that supplies well-known fast food restaurants and UK supermarkets.

Outstanding flexibility.

D3 is an obvious choice for creating complex data visualisations and Trase uses the latest iteration of this library with a completely customised layout for the boundary-pushing sankey diagram. In just a few lines of code, D3 turned a static sankey into a fully animated visualisation of trade data. Using Redux alongside D3 helped us deal with complex interaction flows within the data and meant we could keep the entire application state— including enabled filters, selected nodes and selected regions on the map—in a simple Javascript object and open up the option to share detailed stories drawn from the data.

Hover and click.

The Trase dataset is immense and the relationships between the data points are convoluted, but that doesn’t mean the user experience should be complicated. We took great care with the design of the map and sankey interface, incorporating simple hover and click interactions so users can perform complex filters that help them draw insights. More recently, we designed a new feature for the Trase platform that allows users to create their own data dashboard with custom options.

Applying design to supply chain data.

Read our blog.

Next project.