Contact tracing is a crucial but labour-intensive strategy to reduce SARS-CoV-2 transmissions and the spread of COVID-19. In early 2020 several strategies to automate this process utilising smartphones and bluetooth technology have been put forward. This visual explainer based on the DP-3T proposal which was adopted by the Google/Apple Exposure Notification (GAEN) system demonstrates how privacy preserving proximity tracing works, why we need it and the risks it entails.
In line with the privacy preserving focus of our topic we refrained from monitoring visitor numbers which makes quantfying our outreach difficult. However, the project was well received on Twitter. It was covered by a local Berlin newspaper (Berliner Zeitung) and – among others – shared by Juergen Mueller, CTO of SAP, the company responsible for implementing the Corona-Warn-App in Germany. We also have anecdotal evidence from friends and family that our visual article fostered understanding of how the app works and that it motivated people to install the app when it became available.
Our project heavily relies on the scrollytelling pattern and features elements of explorable explanations and animated diagrams. Scrollytelling is used throughout the article to keep visual elements in the viewport while reading and to alter the appearance of said elements depending on the scroll position.
The first visualisation demonstrates how the disease spreads assuming different reproduction numbers (R) and allows the reader to explore how infections unfold by interacting with sliders to manipulate levels of immunity and isolation. It is based on a custom (but really simple) model that runs once when the page is loaded. The visual representation is implemented with p5.js.
The main part of the article consists of animated diagrams that all use the same custom-build visualisation engine capable of displaying nodes, links, and annotations in a polar coordinate system. This allowed us to easily position and animate elements by providing the distance and angle from a common reference points rather than x/y coordiantes.
The website is implemented with Vue.js and published on Github under an open license.
What was the hardest part of this project?
A major difficulty was that we had to develop our scrollytelling in sync with the actual development of the app.During our conception, there were ongoing discussions at the German and European level about whether to go for a centralised or decentralised approach, which was central to our project. On top of that, the publication of the app became several times.
Another challenge was the academic context in which the discussion about the specific functionality of the app took place.We had to fight our way through highly complex and constantly changing technical documents and papers. All this with the task of reproducing them as simplified as possible, but still correctly.
What can others learn from this project?
First and foremost, they can learn that the use of interactive and visual formats are much more reader-friendly and allow for a higher degree of editorial creativity. We thus managed to convey the complex technical concepts and interrelationships in short and easily understandable text segments.
Transparency also plays a major role. Especially in this day and age, it is elementary to reference plausible sources that any reader can easily verify. We also believe it is helpful to publish the source code as well.