COVID-19 (Coronavirus Disease) Spreading Simulation Tool In JavaScript

Category: Javascript , Recommended | April 18, 2020
Views Total:442 views
Official Page:Go to website
Last Update:April 18, 2020


COVID-19 (Coronavirus Disease) Spreading Simulation Tool In JavaScript


A responsive and mobile-friendly virus spreading simulation tool to illustrate how the coronavirus spreads and why social distancing can slow the spread.

Inspired by Why outbreaks like coronavirus spread exponentially, and how to ‘flatten the curve’.

Note: This simple simulation isn’t a 100% real-world simulation, because there are many more factors in the real world and the people aren’t just balls that are bouncing.

Available Parameters:

  • Population
  • Sick population
  • Social distancing
  • Infection rate
  • Death rate

How to use it:

1. Build the HTML for the Virus Spreading Simulation Tool.

<div id="simulation">
  <div id="chart">
    <div id="chart-stats">
      <span class="border-on-right">Healthy <span id="healthy-number" class="number"></span></span>
      <span class="border-on-right">Sick <span id="sick-number" class="number"></span></span>
      <span class="border-on-right">Recovered <span id="recovered-number" class="number"></span></span>
      <span>Dead <span id="dead-number" class="number"></span></span>
    <div id="chart-dimensions">
        <canvas id="chart-canvas"></canvas>
  <div id="simulation-dimensions">
    <canvas id="simulation-canvas"></canvas>
  <div id="borders-btns">
    <input type="button" id="left-border" value="Close left border"/>
    <input type="button" id="right-border" value="Close right border"/>
  <div id="simulation-end-btns">
    <input type="button" id="adjust" value="Adjust parameters"/>
    <input type="button" id="restart" value="Restart simulation"/>

2. Apply parameters to the Virus Spreading Simulation Tool.

<div id="parameters">
  <p class="parameters-title">Virus Spreading Simulation</p>
  <div class="parameters-text">
      <p>Population: <span id="population-number">125</span></p>
      <input type="range" id="population-slider" name="population" min="50" max="200" step="1" value="125">
  <div class="parameters-text">
      <p>Sick population: <span id="sick-percent">1</span>%</p>
      <input type="range" id="sick-slider" name="sick" min="0" max="100" step="1" value="1">
  <div class="parameters-text">
      <p>Social distancing: <span id="distancing-percent">0</span>%</p>
      <input type="range" id="distancing-slider" name="distancing" min="0" max="100" step="1" value="0">
  <div class="parameters-text">
      <p>Infection rate: <span id="infection-percent">100</span>%</p>
      <input type="range" id="infection-slider" name="infection" min="0" max="100" step="1" value="100">
  <div class="parameters-text">
      <p>Death rate: <span id="death-percent">3</span>%</p>
      <input type="range" id="death-slider" name="death" min="0" max="100" step="1" value="3">
  <input type="button" id="start" value="Start simulation"/>

3. Load the necessary JavaScript and CSS files into the document. That’s it.

<link rel="stylesheet" href="css/styles.css" />
<script src="js/common.js"></script>
<script src="js/vector2d.js"></script>
<script src="js/ball.js"></script>
<script src="js/chart.js"></script>
<script src="js/simulation.js"></script>
<script src="js/app.js"></script>

More Resources About COVID-19:



  • Small update

You Might Be Interested In:

Leave a Reply