Coronavirus Simulation: A Tangible Visualisation

Monday morning, 16 March, I walked into the office to find an enthusiastic Benni standing in front of me: β€œWe need a coronavirus spread simulation! Ideally today. Can you do it?!” He was on fire. Benni’s question was preceded by my thoughts about the actual 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. We decided to implement the simulation 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 are interested in the code, you can have a look at it, feel free to 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 Resounding 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 distance 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 the Anne Will program (German television).

Explanation of Social Distancing

Background

The Washington Post published an article with visualizations on 14 March, which has already received international attention. Health researcher Drew Harris criticized the fact that deaths caused by the virus were not included. So we added deaths to their simulation.

Update

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

Epidemic calculator

End of article. If you spot a typo or have thoughts about this article, feel free to write me. πŸ™†β€β™‚οΈ

Articles Which Are Important to Me

2023

A Practical Guide to Prompt Engineering
AI
How I Learned to Trick My Ambition
Film

2021

How to pronounce GIF properly
Language