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

Preview:

Description:

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>
    <div id="chart-dimensions">
        <canvas id="chart-canvas"></canvas>
    </div>
  </div>
  <div id="simulation-dimensions">
    <canvas id="simulation-canvas"></canvas>
  </div>
  <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>
  <div id="simulation-end-btns">
    <input type="button" id="adjust" value="Adjust parameters"/>
    <input type="button" id="restart" value="Restart simulation"/>
  </div>
</div>

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>
  <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>
  <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>
  <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>
  <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">
  </div>
  <input type="button" id="start" value="Start simulation"/>
</div>

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:

• Best Coronavirus Disease (COVID-19) Plugins For WordPress
• Best Free Coronavirus Disease (COVID-19) Design Resources
• Display Covid-19 Data From Around The World By Country
• Show The Latest COVID-19 Stats Using JavaScript

Changelog:

04/18/2020

• Small update