Nowadays, there is an increasing amount of videos on the YouTube talking about simple ways and models to simulate the spread of a disease. I tried to code one of these simulations myself and noticed that we can learn simple yet great things from these models, which are important to be shared.

What it does

This project is an online presentation with interactive slides that teaches you what is the SIR model. It lets you play with its parameters, which is the best way to understand it. The SIR model is extended to show the effect of individual or global initiative on the evolution of an epidemic.

The presentation is divided into three parts. The first one defines the concept of the Curve of Infected people over time. The second one shows several ways to decrease the height of the Curve, and the last part explains why this is important.

Finally, the user can play with the full interactive model to understand the (simplified) mechanics of disease propagation.

How I built it

The whole project is made from scratch using vanilla Javascript on top of a small HTML5/CSS3 webpage, without any framework or library.

Before the beginning of the hackaton, I tried to code an SIR model with tunable parameters (using HTML sliders). I wanted to make sure that the simulation could run smoothly to have a responsive model when the sliders are dragged. And it worked well!

The first half of the hackaton was dedicated to the writing of classes for the presentation's slides, the diagrams and the interactive graphs. The second half was mainly for writing the content of the presentation and making it interactive.

Challenges I ran into

I came into the realization that I should have used some Javascript frameworks or libraries for the slides or the graphs to gain some time, but it was too late, and everything was already somewhat implemented.

Also, having a working model was great, but I had to play with it a long time (I kind of enjoyed it) to find good ways to convey the important messages.

Accomplishments that I'm proud of

It's pretty and it works. I hope it will also be useful.

What I learned

  • Time integration of differential equations with an adaptive step size. That's the engine behind the model.
  • I hate CSS
  • How to not maintain a good sleep schedule

What's next for this project?

Spread it with maximum R0! Don't have the reference? Take a peek at this project :P Try it out here.

If this gets visibility, maybe add translations and good mobile support. GitHub

Try It out



css3, html5, javascript

Devpost Software Identifier