-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
128 lines (126 loc) · 7.7 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
<!DOCTYPE html>
<html>
<head>
<title>COVIDSIM</title>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-10836970-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-10836970-1');
</script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/Chart.min.js" integrity="sha256-R4pqcOYV8lt7snxMQO/HSbVCFRPMdrhAFMH+vr9giYI=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="covidsim.css">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<link rel="icon" href="favicon.ico" type="image/x-icon">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-12">
<h1>COVIDSIM</h1>
<div class="float-right" style="line-height: 56px;">
<button id="setup-button" class="btn btn-primary" onClick="covidSetup(event)">Setup</button>
<button id="step-button" class="btn btn-secondary" onClick="covidStep(event)" disabled>Step</button>
<button class="btn btn-success play-button" onClick="covidPlay(event, 1)" disabled>Play 1x</button>
<button class="btn btn-success play-button" onClick="covidPlay(event, 25)" disabled>Play 25x</button>
<button class="btn btn-success play-button" onClick="covidPlay(event, 100)" disabled>Play 100x</button>
<button class="btn btn-success play-button" onClick="covidPlay(event, 500)" disabled>Play 500x</button>
<button id="stop-button" class="btn btn-danger" onClick="covidStop(event)" disabled>Stop</button>
<!-- <button id="stop-button" class="btn btn-danger" onClick="covidBenchmark(event)">Benchmark</button> -->
</div>
</div>
</div>
<div class="row">
<div class="col-9">
<canvas id="covidsim" height="600" width="800"></canvas>
<div id="stats">
Time: <strong><span id="time-total">0</span> days</strong>,
Non-Vulnerable: <strong class="non-vulnerable-color"><span id="non-vulnerable-total">0</span></strong>,
Vulnerable: <strong class="vulnerable-color"><span id="vulnerable-total">0</span></strong>,
Asymptomatic: <strong class="asymptomatic-color"><span id="asymptomatic-total">0</span></strong>,
Symptomatic: <strong class="symptomatic-color"><span id="symptomatic-total">0</span></strong>,
Recovered: <strong class="recovered-color"><span id="recovered-total">0</span></strong>,
Dead: <strong class="dead-color"><span id="dead-total">0</span></strong>,
Immune: <strong class="immune-color"><span id="immune-total">0</span></strong>,
R<sub>0</sub>: <strong class="text-warning"><span id="r-total">0</span></strong>,
Speed: <strong><span id="speed-total">0</span>/s</strong>
</div>
<canvas id="covidsim-graph" height="150" width="800"></canvas>
</div>
<div class="col-3">
<form>
<div class="form-group">
<label for="population">Population</label>
<input type="number" class="form-control" id="population" value="1000" min="0">
<small class="form-text text-muted">Total number of people</small>
</div>
<div class="form-group">
<label for="walks-per-day">Walks per day</label>
<input type="number" class="form-control" id="walks-per-day" value="0.5" min="0">
<small class="form-text text-muted">How often do people travel?</small>
</div>
<div class="form-group">
<label for="walk-distance">Walk distance</label>
<input type="number" class="form-control" id="walk-distance" value="100" min="1">
<small class="form-text text-muted">How far is each person's walk?</small>
</div>
<div class="form-group">
<label for="infection-distance">Infection distance</label>
<input type="number" class="form-control" id="infection-distance" value="1" min="1">
<small class="form-text text-muted">How close to do you need to be to catch the disease? This is the circle size. When circles overlap, an infection can occur.</small>
</div>
<div class="form-group">
<label for="area-per-person">Area per person</label>
<input type="number" class="form-control" id="area-per-person" value="200" min="1">
<small class="form-text text-muted">Amount of square area per person, population×area per person defines map size</small>
</div>
<div class="form-group">
<label for="initial-infected">Initial infected</label>
<input type="number" class="form-control" id="initial-infected" value="10" min="1">
<small class="form-text text-muted">Number of people infected at the start</small>
</div>
<div class="form-group">
<label for="vulnerable-death-rate">Vulnerable death rate</label>
<input type="number" class="form-control" id="vulnerable-death-rate" value="0.1" value="0.25" min="0" max="1">
<small class="form-text text-muted">Death rate of the vulnerable population</small>
</div>
<div class="form-group">
<label for="non-vulnerable-death-rate">Non-vulnerable death rate</label>
<input type="number" class="form-control" id="non-vulnerable-death-rate" value="0.005" value="0.25" min="0" max="1">
<small class="form-text text-muted">Death rate of the non-vulnerable population</small>
</div>
<div class="form-group">
<label for="vulnerable-population">Vulnerable population</label>
<input type="number" class="form-control" id="vulnerable-population" value="0.25" min="0" max="1">
<small class="form-text text-muted">Fraction of vulnerable people in the population</small>
</div>
<div class="form-group">
<label for="incubation-period">Incubation period</label>
<input type="number" class="form-control" id="incubation-period" value="4" min="0">
<small class="form-text text-muted">Initial days with virus while asymptomatic</small>
</div>
<div class="form-group">
<label for="symptomatic-period">Symptomatic period</label>
<input type="number" class="form-control" id="symptomatic-period" value="14" min="0">
<small class="form-text text-muted">Days with virus while symptomatic</small>
</div>
<div class="form-group">
<label for="immunity-percentage">Immunity percentage</label>
<input type="number" class="form-control" id="immunity-percentage" value="0.05" min="0" max="1">
<small class="form-text text-muted">Percent of population that is immune to the virus</small>
</div>
<div class="form-group">
<label for="moving-percentage">Moving percentage</label>
<input type="number" class="form-control" id="moving-percentage" value="1" min="0" max="1">
<small class="form-text text-muted">Percent of population that takes walks</small>
</div>
</form>
</div>
</div>
</div>
<script src="covidsim.js"></script>
</body>
</html>