Coronavirus Simulation: A Tangible Visualisation

Originally published

Monday morning, March 16, I entered the office and an enthusiastic Benni was standing in front of me: โ€œWe need a coronavirus spreading simulation! Ideally today. Can you do that?!โ€ He was on fire. Benni's question was preceded by my thoughts of the actual implementation, while Christian โ€” the second developer next to me โ€” quickly answered with an unmistakable โ€œof courseโ€!

Starting Shot

Christian and I immediately began to work on the algorithm for the simulation. By common consent we decided to implement the simulation in modern JavaScript, without any frills. So no frameworks either. Modern ES, nothing else. What a nice opportunity for a project without ready-made products.

Being a backend developer, Christian was able to immerse himself in the mathematics underlying the simulation more quickly and implement it efficiently, so we split our work from noon on. He refined the logic and I created an HTML layout from which I wanted to record a simulation afterwards. 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 about 6pm I exported the first video; at 7pm, after some refinements, the final video was shared in social media. It shows two populations in which different numbers of people move freely. A graph shows the number of healthy, infected, recovered and dead individuals. 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 smoothed on all sides, but was sufficiently effective and was worth seeing. It was good to have been able to contribute something informative and positive to the corona crisis.

A Complete Success

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

Coronavirus spreading simulation
The reason why it is so important to avoid contact with other people! You can start and adjust the simulation yourself here:

In the following two days I created one website, where every visitor can start a simulation and adjust the parameters of the freely moving persons. In this way, the effect of social distance is expressed dynamically and tangibly.

On Wednesday, March 18th, we published a second simulation video, which featured a more accurate algorithm and an adapted color scheme. To our astonishment, this video was shown on Sunday on the show Anne Will (German television).

Explanation of Social Distancing


The Washington Post had on March 14 an article with visualizations created, which already gained international recognition. The health researcher Drew Harris criticized that deaths caused by the virus are not taken into consideration. We therefore extended their simulation to include deaths.


In the meantime, there are much more sophisticated epidemic simulators in which a large number of parameters can be set. My recommendation:

Epidemic calculator

No comment sections for now.

Was this article worth your time? Tell me what you think by dropping me a line. If you spot a typo, Iโ€™d appreciate if you let me know. Thank you!