-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
296 lines (260 loc) · 12.8 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
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Epidemic Simulator</title>
<meta name="description" content="An experimental probability exercise. Investigate how changing variables affects an epidemic in a simulated village.">
<!-- Schema.org markup for Google+ -->
<meta itemprop="name" content="Epidemic Simulator">
<meta itemprop="description" content="An experimental probability exercise. Investigate how changing variables affects an epidemic in a simulated village.">
<meta itemprop="image" content="http://tachyondecay.github.io/epidemic-simulator/images/demo.png">
<!-- Open Graph data -->
<meta property="og:title" content="Epidemic Simulator">
<meta property="og:type" content="website">
<meta property="og:url" content="http://tachyondecay.github.io/epidemic-simulator/">
<meta property="og:image" content="http://tachyondecay.github.io/epidemic-simulator/images/demo.png">
<meta property="og:description" content="An experimental probability exercise. Investigate how changing variables affects an epidemic in a simulated village.">
<meta property="og:site_name" content="Epidemic Simulator">
<!-- Twitter card data -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@tachyondecay">
<meta name="twitter:creator" content="@tachyondecay">
<meta name="twitter:title" content="Epidemic Simulator">
<meta name="twitter:description" content="An experimental probability exercise. Investigate how changing variables affects an epidemic in a simulated village.">
<meta name="twitter:image:src" content="http://tachyondecay.github.io/epidemic-simulator/images/demo.png">
<link href="css/styles.css" rel="stylesheet"/>
<script src="js/jquery-2.1.3.min.js"></script>
<script src="js/jcanvas.min.js"></script>
<script src="js/simulator.js"></script>
<script src="js/runtime.js"></script>
</head>
<body>
<!--[if lt IE 9]>
<p class="IE-notice">
Your version of Internet Explorer does not support the features needed for the simulator to run. Perhaps you could try <a href="http://google.com/chrome">Chrome</a> or <a href="https://www.mozilla.org/en-US/firefox/new/">Firefox</a> instead? Or, upgrade to the latest version of IE.
</p>
<![endif]-->
<!--[if IE 9]>
<p class="IE-notice">
You are not using the most recent version of Internet Explorer. Your version does not support some of the features used in this site's design. The simulator should still work, but you might have a better time with <a href="http://google.com/chrome">Chrome</a> or <a href="https://www.mozilla.org/en-US/firefox/new/">Firefox</a>. Or, upgrade to the latest version of IE.
</p>
<![endif]-->
<header>
<h1>Epidemic Simulator</h1>
<p class="subtitle">An experimental probability exercise.</p>
</header>
<main>
<div class="main-panel">
<div class="instructions">
<h2>Instructions</h2>
<div>
<h3>Be a Researcher</h3>
<p>This simulator allows you to model a simplified epidemic. When you click <strong>Run</strong>, the simulation will advance day-by-day. Each day, a villager has a chance of moving into an empty adjacent space on the grid. If healthy, non-immune villagers come into contact with an infected person, they have a chance of catching the disease, unless that person is quarantined. Once the disease has run its course in a villager, they have a chance of recovering or dying. You can tweak all of these variables, and more, and observe how the epidemic changes.</p>
<p>Each time you conduct a trial the results will appear in the table, and the mean and standard deviation will update. You can clear these results at any time. Note that if you pause a trial and adjust the variables, the simulation will regenerate the grid and reset to Day 0.</p>
<h3>Make a Hypothesis</h3>
<p>Rigorous research means trying to isolate the effect a single variable has on a situation by “controlling” for the other variables. To begin to understand how any of these variables affect the epidemic, try the following:</p>
<ol>
<li>Conduct a number of trials, and record the results.
<li>Change one variable (e.g., grid dimensions).</li>
<li>Make a hypothesis about how your change will affect the outcome of the experiment. Here are some examples, each of different complexity:
<ul>
<li><i>If I increase the size of the village, fewer people will die.</i></li>
<li><i>If I increase the size of the village, the disease will take longer to spread, so fewer people will catch it before the infected die or recover.</i></li>
<li><i>If I decrease the size of the village, the epidemic will not last as long, because the disease will spread and then die out more quickly.</i></li>
</ul>
</li>
<li>Conduct the same number of trials as you did in the first experiment and record the results.</li>
<li>Compare the mean and standard deviations between the two experiments. Do the data support your hypothesis?</li>
<li>Decide on another variable to change, and repeat!</li>
</ol>
</div>
</div>
<div class="simulation-output">
<div class="display">
<h2 class="visuallyhidden">Simulation Output</h2>
<div class="display-meta">
<div class="controls">
<h3>Controls</h3>
<ul>
<li><button id="new">New Grid</button></li>
<li><button id="run">Run</button></li>
<li><button id="pause">Pause</button></li>
</ul>
</div>
<div>
<h3>Legend</h3>
<dl class="legend">
<dt data-status="normal">O</dt>
<dd>Healthy</dd>
<dt data-status="immune">N</dt>
<dd>Immune</dd>
<dt data-status="infected">/</dt>
<dd>Infected</dd>
<dt data-status="quarantined">Q</dt>
<dd>Quarantined</dd>
</dl>
</div>
<div class="day-count">Day <span>0</span></div>
</div>
<div class="canvas-container">
<h3 class="visuallyhidden">Grid</h3>
<canvas id="canvas" data-count="day-count" width="300" height="300">Your browser does not support the <code>canvas</code> element. Please upgrade to a modern browser.</canvas>
</div>
</div>
<div class="results">
<h2>Results</h2>
<table id="results">
<thead>
<tr>
<td><button id="clear" title="Remove all results">Clear</button></td>
<th scope="col">Duration (days)</th>
<th scope="col">Death count</th>
<th scope="col">Number who never got ill</th>
<th scope="col">Number who got ill and recovered</th>
</tr>
</thead>
<tbody data-round="0">
<tr class="divider">
<td colspan="5">
<span>Default variables.</span>
<a href="#" class="view-config">View all variables for this round.</a>
</td>
</tr>
<tr class="stats mean">
<th scope="row">Mean</th>
<td class="day"></td>
<td class="dead"></td>
<td class="healthy"></td>
<td class="recovered"></td>
</tr>
<tr class="stats std_dev">
<th scope="row">Standard Deviation</th>
<td class="day"></td>
<td class="dead"></td>
<td class="healthy"></td>
<td class="recovered"></td>
</tr>
</tbody>
</table>
<div class="show-config">
<p>Variables changed since the last round of trials are in bold.</p>
<dl></dl>
<a href="#">Hide</a>
</div>
</div>
</div>
</div>
<div class="side-panel variables">
<h2>Variables</h2>
<form id="config">
<div class="form-input slider">
<div class="input">
<label for="speed">Simulation Speed</label>
<input type="range" name="speed" id="speed" min="0.2" max="3" step="0.2" data-output="%o second?s/day"/>
</div>
<output for="speed"></output>
</div>
<fieldset id="village">
<legend>Village</legend>
<div class="form-input slider">
<div class="input">
<label for="grid_size">Grid Dimensions</label>
<input type="range" name="grid_size" id="grid_size" min="2" max="50" step="1"/>
</div>
<output for="grid_size"></output>
</div>
<div class="form-input regular">
<div class="input">
<label for="pop">Population</label>
</div>
<div class="output">
<input type="number" name="pop" id="pop" min="2" max="1000" step="1"/>
</div>
</div>
<div class="form-input slider">
<div class="input">
<label for="infected">Percentage Infected</label>
<input type="range" name="infected" id="infected" data-output="%" min="0" max="1" step="0.05"/>
</div>
<output for="infected"></output>
</div>
<div class="form-input slider">
<div class="input">
<label for="immune">Percentage Immune</label>
<input type="range" name="immune" id="immune" data-output="%" min="0" max="1" step="0.05"/>
</div>
<output for="immune"></output>
</div>
</fieldset>
<fieldset id="disease">
<legend>Disease</legend>
<div class="form-input slider">
<div class="input">
<label for="duration">Duration</label>
<input type="range" name="duration" id="duration" min="1" max="15" step="1" data-output="%o day?s" />
</div>
<output for="duration"></output>
</div>
<div class="form-input slider">
<div class="input">
<label for="infects_after">Infectious after</label>
<input type="range" name="infects_after" id="infects_after" min="0" max="14" step="1" data-output="%o day?s" />
</div>
<output for="infects_after"></output>
</div>
<div class="form-input regular">
<div class="input">
<label for="immune_after">Immune after recovery?</label>
</div>
<ul class="output">
<li><label><input type="radio" name="immune_after" value="1"/>Yes</label></li>
<li><label><input type="radio" name="immune_after" value="0"/>No</label></li>
</ul>
</div>
<div class="form-input regular">
<div class="input">
<label for="behaviour">Behaviour when ill</label>
</div>
<div class="output">
<select id="behaviour" name="behaviour">
<option value="0">Normal</option>
<option value="1">Stationary</option>
<option value="2">Quarantined</option>
</select>
</div>
</div>
</fieldset>
<fieldset id="prob">
<legend>Probabilities</legend>
<div class="form-input slider">
<div class="input">
<label for="prob_death">Probability of death</label>
<input type="range" name="prob_death" id="prob_death" min="0" max="1" step="0.05"/>
</div>
<output for="prob_death"></output>
</div>
<div class="form-input slider">
<div class="input">
<label for="prob_infection">Probability of infection</label>
<input type="range" name="prob_infection" id="prob_infection" min="0" max="1" step="0.05"/>
</div>
<output for="prob_infection"></output>
</div>
<div class="form-input slider">
<div class="input">
<label for="prob_static">Probability of remaining stationary</label>
<input type="range" name="prob_static" id="prob_static" min="0" max="1" step="0.05"/>
</div>
<output for="prob_static"></output>
</div>
</fieldset>
</form>
</div>
</main>
<footer>
<p>Inspired by <a href="http://nrich.maths.org/4489/">an NRICH project activity</a>. View the source on <a href="https://github.com/ssiddhantsharma/simulate-epi/">GitHub</a>.</p>
</footer>
</body>
</html>