covid-19/sim/index.html

210 lines
5.6 KiB
HTML
Raw Normal View History

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="sim.css" />
</head>
<body>
<div id="sandbox">
<div id="controls">
2020-04-22 22:48:22 +00:00
<div id="hide_on_first_playthrough">
<div id="section_dynamics">
On <i>average</i>,
each <icon i></icon>...
<br><br>
<div id="label_transmission">
Infects a <icon s></icon> every <span id="label_p_transmission">N</span> days
<br>
(when almost everyone's still <icon s></icon>)
<br>
<input class="sim_input" type="range" id="p_transmission" min="1" max="28" step="1" value="4">
</div>
<div id="label_c_exposed">
<input class="sim_checkbox" type="checkbox" id="c_exposed">
Takes <span id="label_p_exposed">N</span> days to go from <icon e></icon> to <icon i></icon>
<br>
<input class="sim_input" type="range" id="p_exposed" min="1" max="28" step="1" value="3">
</div>
<div id="label_c_recovery">
<input class="sim_checkbox" type="checkbox" id="c_recovery">
Recovers <icon r></icon> in <span id="label_p_recovery">N</span> days
<br>
<input class="sim_input" type="range" id="p_recovery" min="1" max="28" step="1" value="14">
</div>
<div id="label_c_waning">
<input class="sim_checkbox" type="checkbox" id="c_waning">
Loses immunity <icon s></icon> in <span id="label_p_waning">N</span> years
<br>
<input class="sim_input" type="range" id="p_waning" min="0.5" max="5" step="0.5" value="1">
</div>
<hr>
</div>
2020-04-22 22:48:22 +00:00
<div id="section_r">
R0 is <span id="label_p_r0" toFixed="2"></span>
<input class="sim_input" type="range" id="p_r0" min="0" max="6" step="0.01" disabled>
<br>
<span id="label_s">
But R is changed by...
<br>
Susceptible population
<input class="sim_input" type="range" id="p_s" min="0" max="1" step="0.001" value="1" disabled>
<br>
</span>
<span id="int_block_0">
Personal Hygiene
<br>
<input class="sim_input recordable" type="range" id="p_hygiene" min="0" max="1" step="0.001" value="0">
<br>
</span>
<span id="int_block_1">
Physical Distancing
<br>
<input class="sim_input recordable" type="range" id="p_distancing" min="0" max="1" step="0.001" value="0">
<br>
</span>
<span id="int_block_2">
Isolating Cases
<br>
<input class="sim_input recordable" type="range" id="p_isolate" min="0" max="1" step="0.001" value="0">
<br>
Quarantining Contacts
<br>
<input class="sim_input recordable" type="range" id="p_quarantine" min="0" max="1" step="0.001" value="0">
<br>
</span>
<span id="int_block_3">
Deep Cleaning
<br>
<input class="sim_input recordable" type="range" id="p_cleaning" min="0" max="1" step="0.001" value="0">
<br>
Face Masks
<br>
<input class="sim_input recordable" type="range" id="p_masks" min="0" max="1" step="0.001" value="0">
<br>
</span>
<span id="int_block_4">
Summer
<br>
<input class="sim_input recordable" type="range" id="p_summer" min="0" max="1" step="0.001" value="0">
<br>
</span>
<span id="int_block_5">
Vaccinations
<br>
<input class="sim_input recordable" type="range" id="p_vaccines" min="0" max="1" step="0.001" value="0">
<br>
</span>
<br>
<span id="label_re">
R is now <span id="label_p_re" toFixed="2"></span>
<input class="sim_input" type="range" id="p_re" min="0" max="6" step="0.01" disabled>
</span>
<span id="hospital_capacity">
Hospital capacity at <span id="label_p_hospital">N</span>%
<br>
<input class="sim_input recordable" type="range" id="p_hospital" min="0" max="500" step="1" value="100">
</span>
<hr>
2020-04-22 22:48:22 +00:00
</div>
2020-04-22 22:48:22 +00:00
<div id="section_meta">
2020-04-22 22:48:22 +00:00
Simulate <span id="label_p_years" toFixed="1">N</span> years
<span id="section_meta_years">
<br>
<input class="sim_input" type="range" id="p_years" min="0.5" max="10" step="0.5" value="2">
<br>
</span>
in <span id="label_p_speed">N</span> seconds
<br>
2020-04-22 22:48:22 +00:00
<input class="sim_input" type="range" id="p_speed" min="1" max="60" step="1" value="30">
2020-04-22 22:48:22 +00:00
</div>
</div>
<div id="sim_controls">
2020-04-22 22:48:22 +00:00
<div class="big_button">
<div id="bb_start">▶ Start</div>
<div id="bb_pause">❙❙ Pause</div>
<div id="bb_continue">▶ Continue</div>
<div id="bb_reset">↺ Reset</div>
</div>
<div class="small_button">
<div id="sb_reset">↺ Reset</div>
<div id="sb_replay">↺ Replay what you just did</div>
<div id="sb_params">↺ Reset all sliders</div>
</div>
</div>
</div>
<div id="graph">
<canvas id="graphCanvas"></canvas>
<div id="month_ticks">
2020-04-22 22:48:22 +00:00
<!--
<div><span>2020</span></div>
<div><span>2021</span></div>
-->
</div>
<div id="legend">
<icon s></icon> Susceptible<span id="show_percent_s"></span>
<span id="label_exposed"><br><icon e></icon> Exposed</span>
<br><icon i></icon> Infectious<span id="show_percent_i"></span>
<span id="label_removed"><br><icon r></icon> Removed</span>
<br>
<span id="label_herd_immunity">
- - - Herd Immunity
</span>
<br>
<span id="label_capacity">
&nbsp; Healthcare Capacity
</span>
</div>
</div>
</div>
2020-04-22 22:48:22 +00:00
<span id="month_names">
<span>jan</span>
<span>feb</span>
<span>mar</span>
<span>apr</span>
<span>may</span>
<span>jun</span>
<span>jul</span>
<span>aug</span>
<span>sep</span>
<span>oct</span>
<span>nov</span>
<span>dec</span>
</span>
</body>
<script src="sim.js"></script>