Responses by Federica Fragapane and Alex Piacentini, designers and developers.

Background: “Key workers” is a data visualization project designed for the Overseas Development Institute (ODI). The project aims to create a visual narrative of migrant workers’ contributions to the COVID-19 response, showing examples of reforms, new initiatives and campaigns across the world on their contributions in healthcare and beyond.

Refugees and other migrants are part of the global workforce of essential workers to the COVID-19 pandemic. Every day, they save lives and contribute to our economies and societies. Yet, their contributions can be hidden, the skills undervalued and their rights denied. This project uses the communicative potential of data visualization to help shape their essential support.

Design core: The project’s core element is represented by trees as a visual metaphor for growing awareness of the essential contributions of migrants to the COVID-19 crisis. Each tree represents a geographic region and divides into three main branches for each level of the story—local, regional and national. These further divide into branches according to the sectors of the stories—for example, healthcare, hospitality, immigration, food and agriculture. Each dot represents a reform, new initiative or campaign.

Giving a shape to these data sets helps show hidden stories: they’re already being told, but they’re often undervalued or taken for granted. Visualizing them helps to acknowledge them, hopefully making them more visible. Using data visualization as a tool to bring the hidden to light is essential for us, and it’s what makes us particularly proud of this project.

The tracker dataset and the website are regularly updated. The trees are not still: they’re growing, and users can periodically see new branches and new dots appearing to reflect the increasing awareness of these stories and contributions.

Challenges: The timeline. We launched after one month of starting this project. The COVID-19 crisis was ongoing—and it still is as of February 2021—and it was important to publish this project as soon as possible while keeping the highest possible level of accuracy and care for each detail. Fortunately, our time constraints didn’t affect the final results. After a few reiterations, we had a clear view of the overall concept. The synergy that we generated between ODI’s team and the design team was a key factor in making this possible.

Navigation structure: Overall, we tried to make the experience as dynamic as possible, having in mind an interactive data visualization rather than a scroll-based site. This gave place to a layout that has many elements fixed on screen. For example, when a geographic region is selected, there’s a split screen where the tree is always visible on the left side, and the content on the right is scrollable, changing dependent on the user’s interactions.

We chose geographic areas—North America, Latin America, Europe, Africa, and Asia & Oceania—as the main categorization for the stories. As the most important entry point to the data, these are represented by the key visual element of the site—the trees—and also forms the navigation menu.

Technology: Technical restrictions prevented us from using server-side scripting languages, so all processing happens locally with the use of JavaScript and some awesome libraries. The most challenging technical aspect was to dynamically draw trees through the data. This is done in two steps: first, using p5.js to calculate the points describing the branches, taking advantage of the library’s powerful tools to manipulate angles and coordinates; second, we use SVG.js to draw and animate the trees.