-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
181 lines (181 loc) · 9.18 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="index.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.1.9/p5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
<script src="src/utils.js"></script>
<script src="src/constants.js"></script>
<script src="src/quadtree/boundary.js"></script>
<script src="src/quadtree/rectangle.js"></script>
<script src="src/quadtree/circle.js"></script>
<script src="src/quadtree/quadtree.js"></script>
<script src="src/sim/point.js"></script>
<script src="src/sim/field.js"></script>
<script src="src/senders/sender.js"></script>
<script src="src/senders/simple-sender.js"></script>
<script src="src/senders/central-loc-sender.js"></script>
<script src="src/senders/communities-sender.js"></script>
<script src="src/sim/simulation.js"></script>
<script src="src/sim/sim-basic.js"></script>
<script src="src/sim/sim-central.js"></script>
<script src="src/sim/sim-communities.js"></script>
<script src="src/canvas-ui/button.js"></script>
<script src="src/canvas-ui/infectiousChart.js"></script>
<script src="src/controls.js"></script>
<script src="src/sketch.js"></script>
</head>
<body>
<div id="main" class="contentDiv">
<div id="col1" class="section" style="width:600px;">
<h1>Simulating An Epidemic</h1>
<p>
What would happen if everyone went about their lives like COVID-19 doesn't exist? How quickly would the disease spread?
On the other hand, what if a significant proportion of the people in your area were tested every day for the disease? How quickly could it be eradicated?
We all have that little scientist in our head, asking hypothetical questions about the current pandemic that has changed our lives forever.
</p><br>
<p>
This page contains a series of limited toy simulations for indulging said scientist, allowing them to alter many characteristics of the disease and of how people behave,
to help understand why preventative measures such as quarantine, social distancing, community lock-downs, personal hygiene and extensive testing are important tools in this fight.
</p><br>
<p>There are four main sections:</p>
<ol>
<li>Key Takeaways - There is some guidance here in what you can expect to observe, and the buttons restart any simulation with predetermined settings.</li>
<li>Controls - Here you can change the many variables that can have drastic effects on the outcome of the simulation.</li>
<li>Population Status Chart - This chart documents the distribution of people who are healthy, infected, recovered or dead at each point in time, at the end providing insight into how the disease progressed.</li>
<li>Simulation - Here you can watch hundreds of people (small circles) move around their area as they interact with disease carriers and spread the disease themselves.</li>
</ol>
<h2>Key Takeaways</h2>
<p>
*Disclaimer* I am not an epidemiologist so any lessons learned here should not be generalized without deeper consideration.
These simulations aren't meant to be realistic (people aren't little dots randomly roaming around a rectangle), but they allow us to explore ideas by being experimental and quantitative even if it’s in a necessarily limited fashion.
</p>
<ol>
<li>While the disease still exists, as soon as people let up and go back to their normal lives with nothing in place to contain the cases, few though they might be, there will be an additional wave.</li>
<li>The growth rate is very sensitive to:
<ul>
<li>Number of daily interactions. <br><span id="dailyInteractionsPreset"></span></li>
<li>Personal Hygiene, eg. hand washing, mask wearing. <br><span id="hygienePreset"></span></li>
<li>Duration of illness <br><span id="illnessDurationPreset"></span></li>
</ul>
</li>
<li>
Social Distancing and extensive testing, both individually and in combination with each other can help significantly slow the spread of disease.
<br><span id="testCoveragePreset"></span><span id="socialDistancingPreset"></span>
</li>
<li>
Where Social Distancing is impossible, it is better to limit the number of occupants.
<br><span id="smallSpacePreset"></span>
</li>
<li>
Reducing transit between communities can further protect those that are unaffected, but restrictions must be put in place early.
<br><span id="limitedTransitPreset"></span>
</li>
</ol>
</div>
<div id="col2" class="section" style="min-width: 600px;">
<div class="row"><h2>Controls</h2></div>
<div class="row"><h4>Simulation</h4></div>
<div class="row">
<div id="chooseASimTxt" class="column" style="width:25%">
<p>Choose a Simulation:</p>
</div>
<div id="chooseASimInp" class="sliderCol" style="justify-content: center; width:75%">
</div>
</div>
<div class="row">
<div id="dontOverrideSettingsCb" class="column" style="width:100%"></div>
</div>
<div class="row">
<div id="simSpeedTxt" class="column"></div>
<div id="simSpeedInp" class="sliderCol"></div>
</div>
<div class="row">
<div id="hospResTxt" class="column"></div>
<div id="hospResInp" class="sliderCol"></div>
</div>
<div class="row">
<div id="popSizeTxt" class="column"></div>
<div id="popSizeInp" class="sliderCol"></div>
</div>
<div class="row">
<div id="comSizeTxt" class="column"></div>
<div id="comSizeInp" class="sliderCol"></div>
</div>
<div class="row">
<div id="cenVisitIntTxt" class="column"></div>
<div id="cenVisitIntInp" class="sliderCol"></div>
</div>
<div class="row">
<div id="cenLeaveIntTxt" class="column"></div>
<div id="cenLeaveIntInp" class="sliderCol"></div>
</div>
<div class="row">
<div id="comCrossIntTxt" class="column"></div>
<div id="comCrossIntInp" class="sliderCol"></div>
</div>
<div class="row"><h4 style="color:#008080">Disease Prevention</h4></div>
<div class="row">
<div id="vaccinationTxt" class="column"></div>
<div id="vaccinationInp" class="sliderCol"></div>
</div>
<div class="row">
<div id="testPropTxt" class="column"></div>
<div id="testPropInp" class="sliderCol"></div>
</div>
<div class="row">
<div id="sdistancingTxt" class="column"></div>
<div id="sdistancingInp" class="sliderCol"></div>
</div>
<div class="row">
<div id="isdistancingTxt" class="column"></div>
<div id="isdistancingInp" class="sliderCol"></div>
</div>
<div class="row">
<div id="quarantineWithSymptomsCb" class="column"></div>
</div>
<div class="row">
<div id="quarantineWithSymptomsDelayTxt" class="column"></div>
<div id="quarantineWithSymptomsDelayInp" class="column"></div>
</div>
<div class="row"><h4 style="color:#FF4500">Disease Attributes</h4></div>
<div class="row">
<div id="infectionRadiusTxt" class="column"></div>
<div id="infectionRadiusInp" class="sliderCol"></div>
</div>
<div class="row">
<div id="infectionChanceTxt" class="column"></div>
<div id="infectionChanceInp" class="sliderCol"></div>
</div>
<div class="row">
<div id="initialPopInfTxt" class="column"></div>
<div id="initialPopInfInp" class="sliderCol"></div>
</div>
<div class="row">
<div id="inf1DurationTxt" class="column"></div>
<div id="inf1DurationInp" class="sliderCol"></div>
</div>
<div class="row">
<div id="inf2DurationTxt" class="column"></div>
<div id="inf2DurationInp" class="sliderCol"></div>
</div>
<div class="row">
<div id="deathChanceTxt" class="column"></div>
<div id="deathChanceInp" class="sliderCol"></div>
</div>
</div>
<div id="cv" class="section">
<canvas id="chartcv1" class="section" style="height:280px; width:550px"></canvas>
</div>
</div>
</body>
<footer>
<h6>
* This is an interactive simulation based on 3Blue1Brown's very informative <a href="https://www.youtube.com/watch?v=gxAaO2rsdIs&ab_channel=3Blue1Brown">video with the same name</a>.
I would highly recommend watching it because it provides a much more thorough explanation of these simulations than I can provide here.
<br>
* Link to repo: <a href="https://github.com/Immodal/simulating-an-epidemic">Immodal/simulating-an-epidemic</a>
<br>
* This was developed on a desktop with a 1920x1080 screen, and is best experienced at the same resolution.
</footer>
</html>