-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathindex.html
More file actions
356 lines (356 loc) · 19.6 KB
/
index.html
File metadata and controls
356 lines (356 loc) · 19.6 KB
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
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="dcGraphs/libraries/font_awesome/all.min.css">
<link rel="stylesheet" href="dcGraphs/libraries/css/dc.min.css">
<link rel="stylesheet" href="dcGraphs/libraries/css/semantic.min.css">
<link rel="stylesheet" href="dcGraphs/assets/css/style.css">
<title>COVID-19 DC.js Dashboard</title>
</head>
<body>
<div class="loading-gif"></div>
<!-- Sidebar Menu -->
<div id='sidebar' class="ui left demo vertical inverted sidebar labeled icon purple menu">
<a class="item disabled">
<i class="fas fa-home icon"></i>
Home
</a>
<a class="item disabled">
<i class="fas fa-calendar-day icon"></i>
Live
</a>
<a class="item" href='https://github.com/hschafer2017/Covid19Graphs'>
<i class="fas fa-code icon"></i>
Source
</a>
</div>
<!-- ./Sidebar Menu -->
<div class="pusher">
<div class="ui stackable doubling two column centered padded grid">
<!-- Main Header Card -->
<div class="stretched column">
<div class="ui fluid centered card raised very padded text raised segment">
<div class="center aligned middle aligned content">
<i class="ui huge circular purple icon">
<i class="fas fa-viruses"></i>
</i>
</div>
<div class="content center aligned">
<h1>COVID-19 Mini Dashboard</h1>
<p>Historical data coverage of the COVID-19 Global Pandemic from January to April 2020.</p>
</div>
<div class="extra content center aligned middle aligned">
<div class="ui large labeled button" tabindex="0" id='toggleMenu' title="View Menu">
<div class="ui purple button">
<i class="large icon">
<i class='fas fa-cogs'></i>
</i>
</div>
<a class="ui basic purple left pointing label">
Settings
</a>
</div>
<div class="ui large labeled button" tabindex="0" title="Reset All Charts">
<div class="ui purple button">
<i class="large icon">
<i class='fas fa-redo'></i>
</i>
</div>
<a class="ui basic purple left pointing label" href="javascript:dc.filterAll();dc.redrawAll();" title="Reset All Charts">
Reset All
</a>
</div>
</div>
</div>
</div>
<!-- ./Main Header Card -->
<div class="stretched column">
<div class="ui stackable two column centered grid cards">
<!-- Confirmed Cases Stat -->
<div class="eight wide centered center aligned column stretched">
<div class="ui fluid centered card statistic padded text raised segment">
<h2 class="ui label center aligned">
Total Confirmed Cases
</h2>
<div class="ui clearing divider"></div>
<div class='center aligned value' id="totalConfirmedCases"></div>
</div>
</div>
<!-- ./Confirmed Cases Stat -->
<!-- Percentage Global Cases Stat -->
<div class="eight wide centered center aligned column stretched">
<div class="ui fluid card statistic padded text raised segment">
<h2 class="label ui center aligned header">
Percentage of Global Cases
</h2>
<div class="ui clearing divider"></div>
<div class='center aligned value' id="countryCasePercent"></div>
</div>
</div>
<!-- ./Percentage Global Cases Stat -->
</div>
<div class="ui stackable two column centered grid">
<!-- Total Fatalities Stat -->
<div class="eight wide centered center aligned column stretched">
<div class="ui fluid card statistic padded text raised segment">
<h2 class="label ui center aligned headerr">
Total Fatalities
</h2>
<div class="ui clearing divider"></div>
<div class='center aligned value' id="totalDeaths"></div>
</div>
</div>
<!-- ./Total Fatalities Stat -->
<!-- Percentage Fatalities Stat -->
<div class="eight wide center aligned column stretched">
<div class="ui fluid center aligned card statistic padded text raised segment">
<h2 class="label ui center aligned header">
Percentage of Global Fatalities
</h2>
<div class="ui clearing divider"></div>
<div class='center aligned value' id="countryDeathPercent"></div>
</div>
</div>
<!-- ./Percentage Fatalities Stat -->
</div>
<div class="ui stackable two column centered grid">
<!-- Total Recoveries Stat -->
<div class="eight wide center aligned column stretched">
<div class="ui fluid center aligned card statistic padded text raised segment">
<h2 class="label ui center aligned header">
Total Recoveries
</h2>
<div class="ui clearing divider"></div>
<div class='center aligned value' id="totalRecoveries"></div>
</div>
</div>
<!-- ./Total Recoveries Stat -->
<!-- Percentage Recoveries Stat -->
<div class="eight wide center aligned column stretched">
<div class="ui fluid center aligned card statistic padded text raised segment">
<h2 class="label ui center aligned header">
Percentage of Global Recoveries
</h2>
<div class="ui clearing divider"></div>
<div class='center aligned value' id="countryRecoveryPercent"></div>
</div>
</div>
<!-- ./Percentage Recoveries Stat -->
</div>
</div>
</div>
<div class="ui stackable doubling two column centered padded grid">
<!-- Country Drop Down Card -->
<div class="stretched column">
<div class="ui fluid center aligned card padded text raised segment">
<a class="ui left floated right labeled icon huge button" href="javascript:countryFilterDropdown.filterAll();dc.redrawAll();" title="Reset This Chart">
<i class='ui purple icon center aligned'>
<i class='fas fa-redo individual'></i>
</i>
View Statistics By Country
</a>
<div class="ui clearing divider"></div>
<div id="countryDropDown" class='ui center aligned'>
</div>
</div>
</div>
<!-- ./Country Drop Down Card -->
<!-- Search Widget Card -->
<div class="stretched column">
<div class="ui fluid center aligned card padded text raised segment">
<a class="ui left floated right labeled icon huge button" href="javascript:searchCountryWidget.filterAll();dc.redrawAll();" title="Reset This Chart">
<i class='ui purple icon center aligned'>
<i class='fas fa-redo individual'></i>
</i>
Search By Country
</a>
<div class="ui clearing divider"></div>
<div class="ui search">
<div id='search' class="ui icon input">
<input type="text" class="prompt" placeholder="Search countries...">
<i class='icon'>
<i class="fas fa-search"></i>
</i>
</div>
</div>
</div>
</div>
<!-- ./Search Widget Card -->
</div>
<div class="ui stackable doubling two column centered padded grid">
<!-- Cases by Country Tab Card -->
<div class="stretched column">
<div class="ui fluid center aligned card padded text raised segment">
<div class="ui top attached tabular menu">
<a class="item active" data-tab="total">Total</a>
<a class="item" data-tab="per_million">Per Million</a>
</div>
<!-- Cases Per Country Table -->
<div class="ui bottom attached tab segment active" data-tab="total">
<a class="ui left floated right labeled icon huge button" href="javascript:totalStatsTable.filterAll();dc.redrawAll();" title="Reset This Table">
<i class='ui purple icon center aligned'>
<i class='fas fa-redo individual'></i>
</i>
Cases Per Country
</a>
<div class="ui clearing divider"></div>
<table id="topCountries" class="ui tablet stackable celled striped purple compact table">
<thead class="full-width">
<tr>
<th></th>
<th colspan="4">
<div id="select-direction-cases" class="ui form">
<div class="ui buttons">
<button class="ui button" value="descending">
Descending
</button>
<div class="or"></div>
<button class="ui button" value="ascending">
Ascending
</button>
</div>
</div>
</th>
</tr>
<tr>
<th>Rank</th>
<th>Country</th>
<th class="right aligned">Cases</th>
<th class="right aligned">Deaths</th>
<th class="right aligned">Recoveries</th>
</tr>
</thead>
</table>
</div>
<!-- ./Cases Per Country Table -->
<!-- Cases Per Million Per Country Table -->
<div class="ui bottom attached tab segment" data-tab="per_million">
<a class="ui left floated right labeled icon huge button" href="javascript:statsPerMillion.filterAll();dc.redrawAll();" title="Reset This Table">
<i class='ui purple icon center aligned'>
<i class='fas fa-redo individual'></i>
</i>
Cases Per Million
</a>
<div class="ui clearing divider"></div>
<table id="topCountriesPerMillion" class="ui tablet stackable celled striped purple compact table">
<thead class="full-width">
<tr>
<th></th>
<th colspan="4">
<div id="select-direction-mill" class="ui form">
<div class="ui buttons">
<button class="ui button" value="descending">
Descending
</button>
<div class="or"></div>
<button class="ui button" value="ascending">
Ascending
</button>
</div>
</div>
</th>
</tr>
<tr>
<th>Rank</th>
<th>Country</th>
<th class="right aligned">Cases</th>
<th class="right aligned">Deaths</th>
<th class="right aligned">Recoveries</th>
</tr>
</thead>
</table>
</div>
<!-- ./Cases Per Million Per Country Table -->
</div>
</div>
<!-- ./Cases by Country Tab Card -->
<!-- Testing Availability Tab Card -->
<div class="stretched column">
<div class="ui fluid center aligned card padded text raised segment">
<div class="ui top attached tabular menu">
<a class="item active" data-tab="total-test">Total</a>
<a class="item" data-tab="per_thousand">Per Thousand</a>
</div>
<!-- Total Testing Per Country Row Chart -->
<div class="ui bottom attached tab segment active" data-tab="total-test">
<a class="ui left floated right labeled icon huge button" href="javascript:testingTotalAvailability.filterAll();dc.redrawAll();" title="Reset This Chart">
<i class='ui purple icon center aligned'>
<i class='fas fa-redo individual'></i>
</i>
Testing Availability Per Country
</a>
<div class="ui clearing divider"></div>
<div id="testingAvailability1-row"></div>
</div>
<!-- ./Total Testing Per Country Row Chart -->
<!-- Testing Per Thousand Row Chart -->
<div class="ui bottom attached tab segment" data-tab="per_thousand">
<a class="ui left floated right labeled icon huge button" href="javascript:testingThousandAvailability.filterAll();dc.redrawAll();" title="Reset This Chart">
<i class='ui purple icon center aligned'>
<i class='fas fa-redo individual'></i>
</i>
Testing Availability Per Thousand
</a>
<div class="ui clearing divider"></div>
<div id="testingThousandAvailability1-row"></div>
</div>
<!-- ./Testing Per Thousand Row Chart -->
</div>
</div>
<!-- ./Testing Availability Tab Card -->
</div>
<div class="ui stackable doubling two column centered padded grid">
<!-- Cases Per Country over Time Series -->
<div class="stretched column">
<div class="ui fluid center aligned card padded text raised segment">
<div class="ui raised padded text raised segment">
<a class="ui left floated right labeled icon huge button" href="javascript:dailyCasesPerCountry.filterAll();dc.redrawAll();" title="Reset This Chart">
<i class='ui purple icon center aligned'>
<i class='fas fa-redo individual'></i>
</i>
Daily New Cases Per Country From January to April
</a>
<div class="ui clearing divider"></div>
<div class="scrolling-wrapper">
<div id="dailyCasesPerCountry"></div>
<div id="dailyCasesPerCountryOverview"></div>
</div>
</div>
</div>
</div>
<!-- ./Cases Per Country Over Time Series -->
<!-- Fatalities Per Country Over Time Series -->
<div class="stretched column">
<div class="ui fluid center aligned card padded text raised segment">
<div class="ui raised padded text raised segment">
<a class="ui left floated right labeled icon huge button" href="javascript:totalDeathsPerCountry.filterAll();dc.redrawAll();" title="Reset This Chart">
<i class='ui purple icon center aligned'>
<i class='fas fa-redo individual'></i>
</i>
Daily New Fatalities Per Country From January to April
</a>
<div class="ui clearing divider"></div>
<div class="scrolling-wrapper">
<div id="fatalityRatePerCountry"></div>
<div id="fatalityRatePerCountryOverview"></div>
</div>
</div>
</div>
</div>
<!-- ./Fatalities Per Country Over Time Series -->
</div>
</div>
<script src="dcGraphs/libraries/js/jquery.min.js"></script>
<script src="dcGraphs/libraries/js/semantic.min.js"></script>
<script src="dcGraphs/libraries/js/d3.v5.min.js"></script>
<script src="dcGraphs/assets/js/graphStyles.js"></script>
<script src="dcGraphs/libraries/js/crossfilter.min.js"></script>
<script src="dcGraphs/libraries/js/dc.min.js"></script>
<script src="dcGraphs/libraries/js/queue.min.js"></script>
<script src="dcGraphs/libraries/js/dc-resizing.js"></script>
<script src="dcGraphs/libraries/font_awesome/all.min.js"></script>
<script src="dcGraphs/assets/js/index.js"></script>
</body>
</html>