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 on fire. Even as Benni asked the question, my thoughts were already racing ahead to the implementation, while Christian – the second developer next to me – quickly answered with an unmistakable β€œof course!”

Kick Off

Christian and I immediately started working on the algorithm for the simulation. 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 implement it efficiently, 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 not smooth on all sides, but it was sufficiently effective and worth looking at. It was good to have contributed something informative and positive to the Corona crisis.

A Complete Success

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

Coronavirus spreading simulation
This is why it is so important to avoid contact with other people! You can start and adjust the simulation yourself here: corona.katapult-magazin.de

Over the next two days, I created a website where any visitor can start a simulation and adjust the parameters of the freely moving people. 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, this video was shown on Sunday on ARD's Anne Will program.

Explanation of Social Distancing
Explanation of social distancing on the TV program β€œAnne Will”

Background

The Washington Post had published an article with visualizations on 14 March, which had already gained international recognition. Health researcher Drew Harris criticized that deaths caused by the virus were not taken 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:

Epidemic calculator

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. πŸ™†β€β™‚οΈ