-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
140 lines (125 loc) · 5.69 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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Interactive Test</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<main>
<div class="selections">
<div class="graph">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js">
</script>
<div class="layer1">
<canvas id="myChart"></canvas>
</div>
<br>
<div class="layer2">
<canvas id="covidChart"></canvas>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]">
</script>
<script src="script.js">
</script>
</div>
<div class="detail">
<h1>COVID 19 Modelling</h1>
<h3>Select the starting conditions:</h3>
<h2>Parameters</h2>
<div class='parent'>
<div class='child inline-block-child'>
<div class="tooltip"> Population:
<span class="tooltiptext"> This is the total population of people in the simulation</span>
</div>
</div>
<div class='child inline-block-child'>
<input type = "number" id ="populat" class="inputbox" min = "100" max ="1000000000" onchange="generate_new_graph()">
</div>
</div>
<div class="rangeslider">
<input type="range" min="100" max="1000000000" class="myslider" id="sliderRange">
</div>
<div class='parent'>
<div class='child inline-block-child'>
<div class="tooltip"> Infected:
<span class="tooltiptext"> This is the number of infected people at the start of the simulation </span>
</div>
</div>
<div class='child inline-block-child'>
<input type = "number" id ="Infected" class="inputbox" min="100" max="1000000000" onchange="generate_new_graph()">
</div>
</div>
<div class="rangeslider">
<input type="range" min="100" max="1000000000" class="myslider" id="sliderRange2">
</div>
<div class='parent'>
<div class='child inline-block-child'>
<div class="tooltip"> Transmission Probability:
<span class="tooltiptext"> This is the chance that the virus spreads if two people come in contact </span>
</div>
</div>
<div class='child inline-block-child'>
<input type = "number" id ="Transmission_prob" class="inputbox" min = "0" max="1" step = "0.01" onchange="generate_new_graph()">
</div>
</div>
<div class="rangeslider">
<input type="range" min="0" max="1" step = "0.01" class="myslider" id="sliderRange3">
</div>
<div class='parent'>
<div class='child inline-block-child'>
<div class="tooltip"> Contact Rate:
<span class="tooltiptext"> This is the number of contacts every person has on average in one day </span>
</div>
</div>
<div class='child inline-block-child'>
<input type = "number" id ="Contact_Rate" class="inputbox" min = "0" max="10" step="0.1"onchange="generate_new_graph()">
</div>
</div>
<div class="rangeslider">
<input type="range" min="0" max="10" step="0.1" class="myslider" id="sliderRange4">
</div>
<div class='parent'>
<div class='child inline-block-child'>
<div class="tooltip"> Incubation Period:
<span class="tooltiptext"> This is the average number of days during which the virus is present but not infectious or showing symptoms </span>
</div>
</div>
<div class='child inline-block-child'>
<input type = "number" id ="Incubation" class="inputbox" min="1" max="50"onchange="generate_new_graph()">
</div>
</div>
<div class="rangeslider">
<input type="range" min="1" max="50" class="myslider" id="sliderRange5">
</div>
<div class='parent'>
<div class='child inline-block-child'>
<div class="tooltip"> Recovery Rate:
<span class="tooltiptext"> This is the rate at which people recover/die from the virus on average - measured in 1/number of days</span>
</div>
</div>
<div class='child inline-block-child'>
<input type = "number" id ="Recovery" class="inputbox" min = "0"max="1"
step="0.01" onchange="generate_new_graph()">
</div>
</div>
<div class="rangeslider">
<input type="range" min="0" max="1"
step="0.01" class="myslider" id="sliderRange6">
</div>
<br>
<br>
<h5>COVID- 19 is a pandemic that struck humanity at an alarming rate. Variables change on a dime with new statistics being reported after every minute - outbreak. Using conventional statistics to estimate the data is neither very accurate nor very easy to use.</h5>
<br>
<h5>
SEIR stands for Susceptible, Exposed, Infectious and Recovered and uses differential equations to predict how the population shifts as the rates of moving from one population to another change. We can not derive the exact values by nature of differential equations themselves, but we can predict them to a good degree, as we have done here.
</h5>
</div>
</main>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
<script src="script.js"></script>
</body>
</html>