-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
118 lines (86 loc) · 4.93 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>COVID-19-Stats and Trends</title>
<!-- CSS -->
<link rel="stylesheet" href="static/css/style.css">
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap" rel="stylesheet">
<!-- jQuery -->
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="js/chart.js"></script>
<script type="text/javascript" src="js/init.js"></script>
<!-- Bootstrap Links -->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!-- Fonts -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="container">
<div class="heading">
<h1>COVID-19</h1>
<h3>STATS AND TRENDS (so far!)</h3>
<h4><a href="https://github.com/ritomsonowal/COVID-19-Stats-and-Trends"><i class="fa fa-github"></i></a> | Dataset by <a href="https://github.com/pomber/covid19">pomber</a> </h4>
</div>
<hr>
<!-- Visualisation 1 -->
<div class="charts graph-1">
<p>The simplest visualisation would be a <i>Confirmed Cases</i> vs <i>Time</i> graph. But anyone with a basic math background would figure out this graph is of little to no help as it hardly takes into account the demographic of a country, point of outbreak etc.</p>
<p>The plot below gives a representation of <i>Active Cases</i> vs <i>Days since 100 confirmed</i> graph would look like.</p>
<div class="row">
<div class="col-sm-4">
<button type="button" id="country-list-btn">Add more countries</button>
</div>
<div class="col-sm-4">
<div id="add-country">
<label for="cars">Country:</label>
</div>
</div>
<div class="col-sm-4">
<button type="button" id="add-country-btn">Apply</button>
</div>
</div>
<div style="height: 600px">
<canvas id="chart1"></canvas>
</div>
<br><br>
<p>Active Cases in pretty much every country except for China is still on the rise but China has done brilliantly over a period of a month or two in eliminating the number of active cases.</p>
<p>To better compare how each country has dealt with the virus, we plot the second graph.</p>
</div>
<br>
<!-- Visualisation 2 -->
<div class="charts graph-1">
<p>For the second graph, we calculate the percentage increase in confirmed cases since the previous day country-wise.</p>
<div class="row">
<div class="col-sm-4">
<button type="button" id="country-list-btn2">Add more countries</button>
</div>
<div class="col-sm-4">
<div id="add-country2">
<label for="cars">Country:</label>
</div>
</div>
<div class="col-sm-4">
<button type="button" id="add-country-btn2">Apply</button>
</div>
</div>
<div style="height: 600px">
<canvas id="chart2"></canvas>
</div>
<br><br>
<p>The percentage increase gives us a better insight at how efficient the countries have been in containing the infection. It is calculated as <i>(Confirmed Cases Today - Confirmed Cases Yesterday)*100/Confirmed Cases Yesterday</i></p>
<p>Now this graph gives a very different picture on China and other countries likewise. While Mainland China has much more cases of infection, the percentage increase in infected people is very less compared to other countries like US, India etc.</i></p>
</div>
<br>
</div>
<!-- ChartJS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
</body>
</html>