Coronavirus Simulation: A Tangible Visualisation

Monday morning, 16 March. An enthusiastic Benni was waiting for me at the office: “We need a coronavirus spread simulation! Ideally today. Can you do it?!” He was all fired up. Even as Benni asked the question, my thoughts were already racing ahead to the implementation, while Christian – the other developer besides me – quickly answered with an unmistakable “of course!”

Kick Off

Christian and I immediately started working on the algorithm for the simulation – as an extension of the visualization the Washington Post had published two days earlier. By mutual agreement, we decided to implement it in modern JavaScript, without any frills. So no frameworks. Modern ES, nothing else. What a nice opportunity for a project without off-the-shelf products.

As a backend developer, Christian was able to dive into the underlying mathematics of the simulation more quickly and get it implemented fast, so we split our work from midday on. He refined the logic and I created an HTML layout from which I wanted to record a simulation. To achieve a final format of 1024 × 1024 pixels when recording my retina screen, I created the container element in 512 × 512 pixels. If you’re interested in the code, you can watch it live.

At around 6pm I exported the first video; at 7pm, after some refinements, the final video was shared on social media. It shows two populations with different numbers of people moving around freely. A graph shows the number of healthy, infected, recovered and dead people. In the middle of the graph, a line indicates the critical hospital capacity, above which more deaths occur in the population.

The final product was rough around the edges, but it was sufficiently effective and something to be proud of. It was good to have contributed something informative and positive to the coronavirus crisis.

A Complete Success

Benni was right, the post went through the roof and became one of the most shared KATAPULT posts.

Over the next two days, I created a website where any visitor can start a simulation and adjust how many people move around freely. This makes the effect of social distancing dynamic and tangible.

On Wednesday 18 March, we published a second simulation video, using a more accurate algorithm and an adapted color scheme. To our amazement, our simulation was used to explain the situation on Sunday on ARD’s Anne Will program – with KATAPULT credited on screen.

Background

The Washington Post had published an article with visualizations on 14 March, which had already gained international recognition. Health researcher Drew Harris criticized it for not taking deaths caused by the virus into account. We therefore extended their simulation to include deaths.

Update

There are now much more sophisticated epidemic simulators that allow you to set a large number of parameters. My recommendation:

---

That concludes the article. If you spot any typo or would like to share your thoughts on this article, please feel free to get in touch. 🙆‍♂️