/
index.html
536 lines (515 loc) · 59.1 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
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
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
<!DOCTYPE html>
<html>
<head>
<title>Coronavirus Data Dashboard</title>
<meta charset="utf-8"/>
<meta property="og:title" content="Coronavirus Data Dashboard" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://louisdecharson.github.io/covid-19/" />
<meta property="og:image" content="https://louisdecharson.github.io/covid-19/og_image.png"/>
<meta property="og:description" content="Compare the viral spread across countries of COVID-19 by confirmed cases and deaths cases."/>
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@louisdecharson">
<meta name="twitter:creator" content="@louisdecharson">
<meta name="twitter:title" content="Coronavirus Data Dashboard">
<meta name="twitter:description" content="Compare the viral spread across countries of COVID-19 by confirmed cases and deaths cases.">
<meta name="twitter:image" content="https://louisdecharson.github.io/covid-19/og_image.png">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="./covid.css">
<style type="text/css"></style>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script>window.sa_event=window.sa_event||function(){a=[].slice.call(arguments);sa_event.q?sa_event.q.push(a):sa_event.q=[a]};</script>
</head>
<body>
<h1 class="bd-masthead">Coronavirus Data Dashboard</h1>
<ul class="mobile-menu">
<li class="mobile-link" onclick="menu('nav')">Menu</li>
<li class="mobile-link" onclick="menu('info')">Info</li>
</ul>
<div id="loading_screen">
<div class="">
<h6>Data loading...</h6>
<div id="myProgress" class="progress" >
<div id="myBar" class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</div>
<div class="m-2" id="site_content">
<div class="mobile-hide banner text-muted font-italic mb-4" id="info">Using COVID-19 data from <a href="https://github.com/CSSEGISandData/COVID-19">Johns Hopkins University</a>, population data from <a href="https://data.worldbank.org/indicator/SP.POP.TOTL">World Bank</a>, testing data from <a href="https://github.com/owid/covid-19-data/tree/master/public/data/testing">Our World in Data</a>. Code by <a href="https://github.com/louisdecharson">@louisdecharson</a> (with <a href="http://louisdecharson.github.io/grapherjs.html">grapher.js</a>)
</div>
<div class="container" id="container">
<div class="row">
<nav class="mobile-hide col-12 col-md-2 sidebar order-md-1" id="nav">
<ul class="nav flex-md-column flex-row justify-content-around mb-2">
<li class="sidebar_show sidebar-heading active m-1 p-1" target="#by_country" id="button_by_country">
<svg class="svg-icon" viewBox="0 0 20 20">
<path d="M17.659,9.597h-1.224c-0.199-3.235-2.797-5.833-6.032-6.033V2.341c0-0.222-0.182-0.403-0.403-0.403S9.597,2.119,9.597,2.341v1.223c-3.235,0.2-5.833,2.798-6.033,6.033H2.341c-0.222,0-0.403,0.182-0.403,0.403s0.182,0.403,0.403,0.403h1.223c0.2,3.235,2.798,5.833,6.033,6.032v1.224c0,0.222,0.182,0.403,0.403,0.403s0.403-0.182,0.403-0.403v-1.224c3.235-0.199,5.833-2.797,6.032-6.032h1.224c0.222,0,0.403-0.182,0.403-0.403S17.881,9.597,17.659,9.597 M14.435,10.403h1.193c-0.198,2.791-2.434,5.026-5.225,5.225v-1.193c0-0.222-0.182-0.403-0.403-0.403s-0.403,0.182-0.403,0.403v1.193c-2.792-0.198-5.027-2.434-5.224-5.225h1.193c0.222,0,0.403-0.182,0.403-0.403S5.787,9.597,5.565,9.597H4.373C4.57,6.805,6.805,4.57,9.597,4.373v1.193c0,0.222,0.182,0.403,0.403,0.403s0.403-0.182,0.403-0.403V4.373c2.791,0.197,5.026,2.433,5.225,5.224h-1.193c-0.222,0-0.403,0.182-0.403,0.403S14.213,10.403,14.435,10.403"></path>
</svg>
By Country
</li>
<li class="sidebar_show sidebar-heading m-1 p-1" target="#compare" id="button_compare">
<svg class="svg-icon" viewBox="0 0 20 20">
<path d="M12.319,5.792L8.836,2.328C8.589,2.08,8.269,2.295,8.269,2.573v1.534C8.115,4.091,7.937,4.084,7.783,4.084c-2.592,0-4.7,2.097-4.7,4.676c0,1.749,0.968,3.337,2.528,4.146c0.352,0.194,0.651-0.257,0.424-0.529c-0.415-0.492-0.643-1.118-0.643-1.762c0-1.514,1.261-2.747,2.787-2.747c0.029,0,0.06,0,0.09,0.002v1.632c0,0.335,0.378,0.435,0.568,0.245l3.483-3.464C12.455,6.147,12.455,5.928,12.319,5.792 M8.938,8.67V7.554c0-0.411-0.528-0.377-0.781-0.377c-1.906,0-3.457,1.542-3.457,3.438c0,0.271,0.033,0.542,0.097,0.805C4.149,10.7,3.775,9.762,3.775,8.76c0-2.197,1.798-3.985,4.008-3.985c0.251,0,0.501,0.023,0.744,0.069c0.212,0.039,0.412-0.124,0.412-0.34v-1.1l2.646,2.633L8.938,8.67z M14.389,7.107c-0.34-0.18-0.662,0.244-0.424,0.529c0.416,0.493,0.644,1.118,0.644,1.762c0,1.515-1.272,2.747-2.798,2.747c-0.029,0-0.061,0-0.089-0.002v-1.631c0-0.354-0.382-0.419-0.558-0.246l-3.482,3.465c-0.136,0.136-0.136,0.355,0,0.49l3.482,3.465c0.189,0.186,0.568,0.096,0.568-0.245v-1.533c0.153,0.016,0.331,0.022,0.484,0.022c2.592,0,4.7-2.098,4.7-4.677C16.917,9.506,15.948,7.917,14.389,7.107 M12.217,15.238c-0.251,0-0.501-0.022-0.743-0.069c-0.212-0.039-0.411,0.125-0.411,0.341v1.101l-2.646-2.634l2.646-2.633v1.116c0,0.174,0.126,0.318,0.295,0.343c0.158,0.024,0.318,0.034,0.486,0.034c1.905,0,3.456-1.542,3.456-3.438c0-0.271-0.032-0.541-0.097-0.804c0.648,0.719,1.022,1.659,1.022,2.66C16.226,13.451,14.428,15.238,12.217,15.238"></path>
</svg>
Compare
</li>
<li class="sidebar_show sidebar-heading m-1 p-1" target="#ft" id="button_ft">
<svg class="svg-icon" viewBox="0 0 20 20">
<path d="M11.709,7.438H8.292c-0.234,0-0.427,0.192-0.427,0.427v8.542c0,0.234,0.192,0.427,0.427,0.427h3.417c0.233,0,0.426-0.192,0.426-0.427V7.865C12.135,7.63,11.942,7.438,11.709,7.438 M11.282,15.979H8.719V8.292h2.563V15.979zM6.156,11.709H2.74c-0.235,0-0.427,0.191-0.427,0.426v4.271c0,0.234,0.192,0.427,0.427,0.427h3.417c0.235,0,0.427-0.192,0.427-0.427v-4.271C6.583,11.9,6.391,11.709,6.156,11.709 M5.729,15.979H3.167v-3.416h2.562V15.979zM17.261,3.167h-3.417c-0.235,0-0.427,0.192-0.427,0.427v12.812c0,0.234,0.191,0.427,0.427,0.427h3.417c0.234,0,0.427-0.192,0.427-0.427V3.594C17.688,3.359,17.495,3.167,17.261,3.167 M16.833,15.979h-2.562V4.021h2.562V15.979z"></path>
</svg>
Deaths tracker
</li>
<li class="sidebar_show sidebar-heading m-1 p-1" target="#testing" id="button_testing">
<svg class="svg-icon" viewBox="0 0 512 512"><g><path d="m331 222.458v-192.458h30v-30h-210v30h30v192.458l-146.386 219.581c-9.224 13.835-10.079 31.536-2.233 46.196 7.845 14.659 23.047 23.765 39.674 23.765h367.89c16.627 0 31.829-9.106 39.675-23.766s6.99-32.361-2.233-46.196zm-120 9.084v-201.542h90v201.542l38.554 57.831c-7.511-1.431-15.502-2.373-23.554-2.373-33.16 0-65.354 15.906-66.708 16.583-7.464 3.732-31.586 13.417-53.292 13.417-13.421 0-27.137-3.555-37.301-7.007zm242.169 242.537c-1.274 2.381-5.115 7.921-13.225 7.921h-367.889c-8.109 0-11.95-5.54-13.225-7.921-1.274-2.382-3.754-8.651.744-15.399l81.989-122.983c12.62 4.859 33.325 11.303 54.437 11.303 33.16 0 65.354-15.906 66.708-16.583 7.463-3.732 31.585-13.417 53.292-13.417 20.542 0 41.785 8.324 49.878 11.857l86.548 129.822c4.497 6.749 2.018 13.017.743 15.4z"/><path d="m301 362h30v30h-30z"/><path d="m241 422h30v30h-30z"/><path d="m181 392h30v30h-30z"/><path d="m241 242h30v30h-30z"/></g></svg>
Testing
</li>
<li class="sidebar_show sidebar-heading m-1 p-1" target="#mobility" id="button_mobility">
<svg class="svg-icon" viewBox="0 0 512 512"> <g><g><path d="M121,68.5H45c-8.291,0-15,6.709-15,15s6.709,15,15,15h76c8.291,0,15-6.709,15-15S129.291,68.5,121,68.5z"/></g></g><g><g><path d="M121,188.5H45c-8.291,0-15,6.709-15,15s6.709,15,15,15h76c8.291,0,15-6.709,15-15S129.291,188.5,121,188.5z"/></g></g><g><g><path d="M91,128.5H15c-8.291,0-15,6.709-15,15s6.709,15,15,15h76c8.291,0,15-6.709,15-15S99.291,128.5,91,128.5z"/></g></g><g><g><path d="M482,203.5h-91v-60c0-26.346-32.229-40.218-51.22-21.202L219.789,242.289c-11.719,11.719-11.719,30.703,0,42.422l68.789,68.789l-83.789,83.789c-11.719,11.719-11.719,30.703,0,42.422c11.718,11.718,30.703,11.719,42.422,0l105-105c11.719-11.719,11.719-30.703,0-42.422L283.422,263.5L331,215.922V233.5c0,16.567,13.433,30,30,30h121c16.567,0,30-13.433,30-30S498.567,203.5,482,203.5z"/></g></g><g><g><path d="M280.14,51.04c-11.924-7.925-27.744-6.357-37.852,3.75l-82.5,82.5c-11.719,11.719-11.719,30.703,0,42.422s30.704,11.718,42.423-0.001l65.112-65.112l21.934,15.8l29.306-29.306c4.902-4.902,10.684-8.707,17.007-11.678L280.14,51.04z"/></g></g><g><g><path d="M198.578,305.922c-7.601-7.601-12.675-16.956-15.35-27.072L24.789,437.289c-11.719,11.719-11.719,30.703,0,42.422c11.718,11.718,30.703,11.719,42.422,0l152.578-152.578L198.578,305.922z"/></g></g><g><g><circle cx="406" cy="68.5" r="45"/></g></g></svg>
Mobility
</li>
<li class="sidebar_show sidebar-heading m-1 p-1" target="#hospitalization" id="button_hospitalization">
<svg class="svg-icon" viewBox="0 0 512 512"><g><path d="m421 459.5c-4.136 0-7.5 3.364-7.5 7.5s3.364 7.5 7.5 7.5 7.5-3.364 7.5-7.5-3.364-7.5-7.5-7.5zm22.5-31.446v-43.294c0-15.047-4.354-29.64-12.593-42.202-2.271-3.463-6.919-4.429-10.385-2.158-3.464 2.271-4.43 6.921-2.158 10.384 6.631 10.111 10.136 21.86 10.136 33.976v37.877c-2.441-.411-4.944-.637-7.5-.637s-5.059.226-7.5.637v-37.877c0-25.987-21.138-47.13-47.12-47.13-25.987 0-47.13 21.143-47.13 47.13v43.28c0 34.253-27.871 62.12-62.13 62.12-34.253 0-62.12-27.867-62.12-62.12v-22.312c2.327.834 4.95 1.292 7.519 1.292 2.591 0 5.106-.458 7.481-1.297v22.317c0 25.982 21.138 47.12 47.12 47.12 25.987 0 47.13-21.138 47.13-47.12v-43.28c0-34.258 27.871-62.13 62.13-62.13 10.166 0 20.255 2.521 29.176 7.291 3.654 1.952 8.197.575 10.15-3.078s.574-8.197-3.078-10.15c-11.089-5.928-23.623-9.062-36.248-9.062-42.529 0-77.13 34.6-77.13 77.13v43.28c0 17.711-14.413 32.12-32.13 32.12-17.711 0-32.12-14.409-32.12-32.12v-102.435c76.673-11.062 134-76.954 134-154.885 0-9.429-6.171-18.14-15-21.23v-71.991c0-25.834-17.146-48.042-41.522-54.867-2.511-12.88-13.874-22.633-27.478-22.633h-15c-15.439 0-28 12.561-28 28s12.561 28 28 28h15c11.939 0 22.151-7.514 26.17-18.058 16.479 5.862 27.83 21.51 27.83 39.558v72.027c-8.74 3.148-14.968 11.656-15.001 21.58-.208 61.268-50.227 111.114-111.499 111.114-25.738 0-50.866-9.018-70.756-25.391-3.197-2.632-7.924-2.175-10.557 1.023s-2.175 7.925 1.023 10.557c22.567 18.579 51.081 28.811 80.289 28.811 69.516 0 126.263-56.552 126.499-126.063.014-4.153 3.181-7.708 7.059-7.925 4.244-.237 7.942 3.228 7.942 7.488 0 71.665-53.615 132.07-124.714 140.508-5.294.628-9.286 5.11-9.286 10.425v62.865c.023 4.21-3.668 7.689-7.873 7.491-3.93-.185-7.127-3.736-7.127-7.915v-62.441c0-5.315-3.992-9.797-9.286-10.425-71.098-8.438-124.713-68.843-124.713-140.508 0-4.255 3.694-7.725 7.941-7.488 3.879.216 7.046 3.771 7.06 7.925.085 25.115 7.547 49.377 21.578 70.165 2.317 3.433 6.977 4.337 10.413 2.021 3.433-2.317 4.338-6.979 2.021-10.413-12.362-18.314-18.937-39.692-19.012-61.823-.033-9.924-6.26-18.432-15.001-21.58v-72.028c0-18.048 11.351-33.696 27.83-39.558 4.019 10.544 14.231 18.058 26.17 18.058h15c15.439 0 28-12.561 28-28s-12.561-28-28-28h-15c-13.604 0-24.967 9.753-27.478 22.633-24.376 6.825-41.522 29.033-41.522 54.867v71.993c-8.84 3.097-15 11.824-15 21.228 0 77.931 57.327 143.823 134 154.885v102.434c0 42.524 34.596 77.12 77.12 77.12 42.529 0 77.13-34.596 77.13-77.12v-43.28c0-17.716 14.413-32.13 32.13-32.13 17.711 0 32.12 14.414 32.12 32.13v43.294c-13.437 7.793-22.5 22.326-22.5 38.946 0 24.813 20.187 45 45 45s45-20.187 45-45c0-16.62-9.063-31.153-22.5-38.946zm-168.5-387.054h-15c-7.168 0-13-5.832-13-13s5.832-13 13-13h15c7.168 0 13 5.832 13 13s-5.832 13-13 13zm-145-26h15c7.168 0 13 5.832 13 13s-5.832 13-13 13h-15c-7.168 0-13-5.832-13-13s5.832-13 13-13zm291 482c-16.542 0-30-13.458-30-30s13.458-30 30-30 30 13.458 30 30-13.458 30-30 30z"/></g></svg>
Hospitalization
</li>
<li class="sidebar_show sidebar-heading m-1 p-1 text-orange" target="#issues" id="button_issues">
<svg class="svg-icon" viewBox="0 0 512 512">
<g>
<path d="M503.839,395.379l-195.7-338.962C297.257,37.569,277.766,26.315,256,26.315c-21.765,0-41.257,11.254-52.139,30.102
L8.162,395.378c-10.883,18.85-10.883,41.356,0,60.205c10.883,18.849,30.373,30.102,52.139,30.102h391.398
c21.765,0,41.256-11.254,52.14-30.101C514.722,436.734,514.722,414.228,503.839,395.379z M477.861,440.586
c-5.461,9.458-15.241,15.104-26.162,15.104H60.301c-10.922,0-20.702-5.646-26.162-15.104c-5.46-9.458-5.46-20.75,0-30.208
L229.84,71.416c5.46-9.458,15.24-15.104,26.161-15.104c10.92,0,20.701,5.646,26.161,15.104l195.7,338.962
C483.321,419.836,483.321,431.128,477.861,440.586z">
</path>
</g>
<g>
<g>
<rect x="241.001" y="176.01" width="29.996" height="149.982"/>
</g>
</g>
<g>
<g>
<path d="M256,355.99c-11.027,0-19.998,8.971-19.998,19.998s8.971,19.998,19.998,19.998c11.026,0,19.998-8.971,19.998-19.998
S267.027,355.99,256,355.99z"/>
</g>
</g>
</svg>
Data issues
</li>
<li class="sidebar_show sidebar-heading m-1 p-1" target="#bugs" id="button_bugs">
<svg class="svg-icon" viewBox="0 0 512 512">
<g>
<path d="M497.229,260.925h-88.615v-30.708c44.584-7.102,78.769-45.816,78.769-92.368v-19.692c0-8.156-6.613-14.769-14.769-14.769
s-14.769,6.613-14.769,14.769v19.692c0,30.206-21.04,55.573-49.23,62.261v-13.03c0-13.573-11.042-24.615-24.615-24.615H369.23
v-54.153c0-31.066-22.254-57.024-51.656-62.793l10.998-24.746c3.313-7.453-0.044-16.182-7.498-19.494
c-7.455-3.314-16.182,0.044-19.494,7.498l-15.794,35.536h-59.573L210.42,8.775c-3.312-7.453-12.041-10.811-19.494-7.498
c-7.453,3.312-10.81,12.041-7.498,19.494l10.998,24.746c-29.401,5.77-51.655,31.726-51.655,62.793v54.153h-14.769
c-13.573,0-24.615,11.042-24.615,24.615v13.03c-28.19-6.687-49.23-32.055-49.23-62.261v-19.692
c0-8.156-6.613-14.769-14.769-14.769s-14.769,6.613-14.769,14.769v19.692c0,46.552,34.185,85.265,78.769,92.368v30.708H14.771
c-8.156,0-14.769,6.613-14.769,14.769s6.613,14.769,14.769,14.769h88.615v30.708c-44.584,7.102-78.769,45.816-78.769,92.368
v19.692c0,8.156,6.613,14.769,14.769,14.769s14.769-6.613,14.769-14.769v-19.692c0-30.206,21.04-55.573,49.23-62.261v8.107
C103.386,443.537,171.849,512,256,512s152.614-68.463,152.614-152.614v-8.107c28.19,6.688,49.23,32.055,49.23,62.261v19.692
c0,8.156,6.613,14.769,14.769,14.769s14.769-6.613,14.769-14.769v-19.692c0-46.552-34.185-85.265-78.769-92.368v-30.708h88.615
c8.156,0,14.769-6.613,14.769-14.769S505.385,260.925,497.229,260.925z M172.308,108.311c0-19.002,15.459-34.461,34.461-34.461
h98.461c19.002,0,34.461,15.459,34.461,34.461v54.153H172.308V108.311z M379.076,359.386c0,67.864-55.212,123.076-123.076,123.076
S132.924,427.25,132.924,359.386V192.003h108.307v142.768c0,8.156,6.613,14.769,14.769,14.769s14.769-6.613,14.769-14.769V192.003
h108.307V359.386z"/>
</g>
</svg>
Report bugs
</li>
<li class="sidebar_show sidebar-heading m-1 p-1" target="#settings" id="button_settings">
<svg class="svg-icon" viewBox="0 0 512 512">
<path d="m108.649 194.85c-30.425 0-55.177 24.752-55.177 55.177s24.752 55.177 55.177 55.177 55.177-24.752 55.177-55.177-24.752-55.177-55.177-55.177zm0 80.356c-13.883 0-25.179-11.295-25.179-25.179s11.296-25.179 25.179-25.179 25.179 11.295 25.179 25.179-11.296 25.179-25.179 25.179z"/><path d="m206.358 325.171c-30.424 0-55.176 24.752-55.176 55.177 0 30.424 24.752 55.176 55.176 55.176 30.425 0 55.177-24.752 55.177-55.176 0-30.425-24.752-55.177-55.177-55.177zm0 80.355c-13.883 0-25.178-11.295-25.178-25.179s11.295-25.179 25.178-25.179c13.884 0 25.179 11.295 25.179 25.179.001 13.884-11.295 25.179-25.179 25.179z"/><path d="m496.18 324.693c-.099-.098-.198-.194-.299-.29l-51.938-49.011c29.074-21.984 42.208-60.897 30.264-96.895-56.309-169.883-272.685-223.779-401.614-96.798-96.561 95.102-95.66 248.445-4.044 342.874 82.305 84.831 211.993 96.745 307.711 34.089 44.824-29.332 24.217-99.152-29.421-99.152-40.06 0-46.792-56.011-8.951-65.602l91.503 96.974c.096.101.192.201.291.3 18.343 18.385 48.139 18.434 66.53.042 18.389-18.388 18.389-48.152-.032-66.531zm-193.801 47.105c12.051 11.42 27.84 17.709 44.461 17.709 23.956 0 32.988 30.972 12.993 44.056-83.775 54.84-197.555 44.538-269.754-29.878-80.978-83.463-80.501-217.407 3.896-300.423 113.093-111.242 302.248-64.702 351.759 84.677 8.389 25.283-2.094 52.756-24.082 66.419l-83.314-78.619c5.044-24.218-1.942-49.749-20.246-68.052-22.973-22.974-95.346-34.425-126.711-37.832-9.513-1.036-17.568 7.006-16.533 16.533 3.435 31.487 14.819 103.696 37.833 126.711 18.316 18.314 43.86 25.286 68.059 20.243l35.094 37.192c-37.37 20.287-44.958 71.41-13.455 101.264zm-68.487-179.911c-11.303-11.303-21.402-54.292-26.734-89.723 35.432 5.331 78.421 15.431 89.723 26.734 17.404 17.404 17.407 45.58 0 62.989-17.365 17.367-45.547 17.442-62.989 0zm241.11 178.126c-6.61 6.61-17.308 6.64-23.957.107-7.678-8.137-134.279-142.308-141.333-149.783 5.918-4.395 11.222-9.699 15.623-15.623l149.784 141.343c6.539 6.656 6.503 17.335-.117 23.956z"/><path d="m108.649 194.85c-30.425 0-55.177 24.752-55.177 55.177s24.752 55.177 55.177 55.177 55.177-24.752 55.177-55.177-24.752-55.177-55.177-55.177zm0 80.356c-13.883 0-25.179-11.295-25.179-25.179s11.296-25.179 25.179-25.179 25.179 11.295 25.179 25.179-11.296 25.179-25.179 25.179z"/><path d="m206.358 325.171c-30.424 0-55.176 24.752-55.176 55.177 0 30.424 24.752 55.176 55.176 55.176 30.425 0 55.177-24.752 55.177-55.176 0-30.425-24.752-55.177-55.177-55.177zm0 80.355c-13.883 0-25.178-11.295-25.178-25.179s11.295-25.179 25.178-25.179c13.884 0 25.179 11.295 25.179 25.179.001 13.884-11.295 25.179-25.179 25.179z"/><path d="m496.18 324.693c-.099-.098-.198-.194-.299-.29l-51.938-49.011c29.074-21.984 42.208-60.897 30.264-96.895-56.309-169.883-272.685-223.779-401.614-96.798-96.561 95.102-95.66 248.445-4.044 342.874 82.305 84.831 211.993 96.745 307.711 34.089 44.824-29.332 24.217-99.152-29.421-99.152-40.06 0-46.792-56.011-8.951-65.602l91.503 96.974c.096.101.192.201.291.3 18.343 18.385 48.139 18.434 66.53.042 18.389-18.388 18.389-48.152-.032-66.531zm-193.801 47.105c12.051 11.42 27.84 17.709 44.461 17.709 23.956 0 32.988 30.972 12.993 44.056-83.775 54.84-197.555 44.538-269.754-29.878-80.978-83.463-80.501-217.407 3.896-300.423 113.093-111.242 302.248-64.702 351.759 84.677 8.389 25.283-2.094 52.756-24.082 66.419l-83.314-78.619c5.044-24.218-1.942-49.749-20.246-68.052-22.973-22.974-95.346-34.425-126.711-37.832-9.513-1.036-17.568 7.006-16.533 16.533 3.435 31.487 14.819 103.696 37.833 126.711 18.316 18.314 43.86 25.286 68.059 20.243l35.094 37.192c-37.37 20.287-44.958 71.41-13.455 101.264zm-68.487-179.911c-11.303-11.303-21.402-54.292-26.734-89.723 35.432 5.331 78.421 15.431 89.723 26.734 17.404 17.404 17.407 45.58 0 62.989-17.365 17.367-45.547 17.442-62.989 0zm241.11 178.126c-6.61 6.61-17.308 6.64-23.957.107-7.678-8.137-134.279-142.308-141.333-149.783 5.918-4.395 11.222-9.699 15.623-15.623l149.784 141.343c6.539 6.656 6.503 17.335-.117 23.956z"/>
</svg>
Settings
</li>
<li class="fixed-bottom footer">
<svg class="svg-icon" viewBox="0 0 20 20">
<path fill="none" d="M10,0.625c-5.178,0-9.375,4.197-9.375,9.375S4.822,19.375,10,19.375s9.375-4.197,9.375-9.375S15.178,0.625,10,0.625 M10,18.522V1.478c4.707,0,8.522,3.815,8.522,8.522S14.707,18.522,10,18.522"></path>
</svg> <span id="darkmodeSwitch" class="badge darkmode badge-primary" data-toggle="tooltip" title="Toggle the dark mode">ON</span>
<div class="float-right">
<svg class="svg-icon" viewBox="0 0 20 20">
<path d="M16.469,8.924l-2.414,2.413c-0.156,0.156-0.408,0.156-0.564,0c-0.156-0.155-0.156-0.408,0-0.563l2.414-2.414c1.175-1.175,1.175-3.087,0-4.262c-0.57-0.569-1.326-0.883-2.132-0.883s-1.562,0.313-2.132,0.883L9.227,6.511c-1.175,1.175-1.175,3.087,0,4.263c0.288,0.288,0.624,0.511,0.997,0.662c0.204,0.083,0.303,0.315,0.22,0.52c-0.171,0.422-0.643,0.17-0.52,0.22c-0.473-0.191-0.898-0.474-1.262-0.838c-1.487-1.485-1.487-3.904,0-5.391l2.414-2.413c0.72-0.72,1.678-1.117,2.696-1.117s1.976,0.396,2.696,1.117C17.955,5.02,17.955,7.438,16.469,8.924 M10.076,7.825c-0.205-0.083-0.437,0.016-0.52,0.22c-0.083,0.205,0.016,0.437,0.22,0.52c0.374,0.151,0.709,0.374,0.997,0.662c1.176,1.176,1.176,3.088,0,4.263l-2.414,2.413c-0.569,0.569-1.326,0.883-2.131,0.883s-1.562-0.313-2.132-0.883c-1.175-1.175-1.175-3.087,0-4.262L6.51,9.227c0.156-0.155,0.156-0.408,0-0.564c-0.156-0.156-0.408-0.156-0.564,0l-2.414,2.414c-1.487,1.485-1.487,3.904,0,5.391c0.72,0.72,1.678,1.116,2.696,1.116s1.976-0.396,2.696-1.116l2.414-2.413c1.487-1.486,1.487-3.905,0-5.392C10.974,8.298,10.55,8.017,10.076,7.825"></path>
</svg><span id="navSwitch" class="badge badge-secondary" data-toggle="tooltip" title="Add your settings to the url, so it's ready for sharing">OFF</span>
</div>
</li>
</ul>
</nav>
<main class="col-12 col-md-10 order-md-2" id="main">
<div class="content" id="by_country">
<h2 class="mt-2 mb-2">Data by country</h2>
<div class="container mb-2">
<div class="row">
<div class="col-md-4 col-12 order-md-2">
<div class="text-md-right text-left form-row font-italic">
<div class="col-auto">
<div class="mr-sm-2 text-muted">Last data point:</div>
</div>
<div class="col-auto">
<div class="mr-sm-2 text-muted" id="lastDataPoint"></div>
</div>
</div>
</div>
<div class="col-md-8 col-12 order-md-1">
<form class="form-inline mb-2 mt-2 form-row">
<div class="col-auto my-1">
<div class="form-group">
<select class="mr-sm-2" id="chooseCountry">
</select>
</div>
</div>
</form>
</div>
</div>
</div>
<div class="container mb-4" id="summary_container">
<div class="row text-center" id="summary_stats">
<div class="col-4">
<p class="col-title confirmed">Confirmed</p>
<h3 id="nb_confirmed" class="confirmed"></h3>
<h6><span>​</span></h6>
<div id="sparkline_confirmed"></div>
</div>
<div class="col-4">
<p class="col-title deaths">Deaths</p>
<h3 id="nb_deaths" class="deaths"></h3>
<h6 id="nb_deaths_rate" class="deaths"></h6>
<div id="sparkline_deaths"></div>
</div>
<div class="col-4">
<p class="col-title recovered">Recovered</p>
<h3 id="nb_recovered" class="recovered"></h3>
<h6 id="nb_recovered_rate" class="recovered"></h6>
<div id="sparkline_recovered"></div>
</div>
</div>
</div>
<form class="form-inline">
<div class="form-inline mr-3">
<label class="my-1 mr-2 text-muted">Range:</label>
<select class="select-dates custom-select my-1 mr-sm-2" target="country_graph" start>
</select>
<label class="my-1 mr-2 text-muted">To</label>
<select class="select-dates custom-select my-1 mr-sm-2" target="country_graph" end>
</select>
</div>
<div class="my-1 mr-3 text-muted custom-switch">
<input type="checkbox" class="custom-control-input" id="logScaleSwitch">
<label class="custom-control-label text-muted" for="logScaleSwitch">Log scale</label>
</div>
<div class="my-1 mr-3 text-muted custom-switch">
<input type="checkbox" class="custom-control-input" id="barSwitch">
<label class="custom-control-label text-muted" for="barSwitch">Bars</label>
</div>
<div class="my-1 text-muted custom-switch">
<input type="checkbox" class="custom-control-input" id="percPopulation">
<label class="custom-control-label text-muted" for="percPopulation">As % of population</label>
</div>
</form>
<div class="country_graph_container mt-4 mb-4">
<h4 class="">Confirmed cases & deaths - <span class="country_name"></span></h4>
<div class="download_data badge-pill badge float-right mb-1" onclick="download_data('country_graph')">
<svg class="svg-icon" viewBox="0 0 20 20">
<path fill="none" d="M15.608,6.262h-2.338v0.935h2.338c0.516,0,0.934,0.418,0.934,0.935v8.879c0,0.517-0.418,0.935-0.934,0.935H4.392c-0.516,0-0.935-0.418-0.935-0.935V8.131c0-0.516,0.419-0.935,0.935-0.935h2.336V6.262H4.392c-1.032,0-1.869,0.837-1.869,1.869v8.879c0,1.031,0.837,1.869,1.869,1.869h11.216c1.031,0,1.869-0.838,1.869-1.869V8.131C17.478,7.099,16.64,6.262,15.608,6.262z M9.513,11.973c0.017,0.082,0.047,0.162,0.109,0.226c0.104,0.106,0.243,0.143,0.378,0.126c0.135,0.017,0.274-0.02,0.377-0.126c0.064-0.065,0.097-0.147,0.115-0.231l1.708-1.751c0.178-0.183,0.178-0.479,0-0.662c-0.178-0.182-0.467-0.182-0.645,0l-1.101,1.129V1.588c0-0.258-0.204-0.467-0.456-0.467c-0.252,0-0.456,0.209-0.456,0.467v9.094L8.443,9.553c-0.178-0.182-0.467-0.182-0.645,0c-0.178,0.184-0.178,0.479,0,0.662L9.513,11.973z"></path>
</svg>
<span class="badge badge-pill">Download Data</span>
</div>
<div class="" id="country_graph"></div>
</div>
<div class="country_graph_new_cases_container mt-4 mb-4">
<h4 class="">New cases - <span class="country_name"></span></h4>
<div class="download_data badge-pill badge float-right mb-1" onclick="download_data('country_graph_new_cases')">
<svg class="svg-icon" viewBox="0 0 20 20">
<path fill="none" d="M15.608,6.262h-2.338v0.935h2.338c0.516,0,0.934,0.418,0.934,0.935v8.879c0,0.517-0.418,0.935-0.934,0.935H4.392c-0.516,0-0.935-0.418-0.935-0.935V8.131c0-0.516,0.419-0.935,0.935-0.935h2.336V6.262H4.392c-1.032,0-1.869,0.837-1.869,1.869v8.879c0,1.031,0.837,1.869,1.869,1.869h11.216c1.031,0,1.869-0.838,1.869-1.869V8.131C17.478,7.099,16.64,6.262,15.608,6.262z M9.513,11.973c0.017,0.082,0.047,0.162,0.109,0.226c0.104,0.106,0.243,0.143,0.378,0.126c0.135,0.017,0.274-0.02,0.377-0.126c0.064-0.065,0.097-0.147,0.115-0.231l1.708-1.751c0.178-0.183,0.178-0.479,0-0.662c-0.178-0.182-0.467-0.182-0.645,0l-1.101,1.129V1.588c0-0.258-0.204-0.467-0.456-0.467c-0.252,0-0.456,0.209-0.456,0.467v9.094L8.443,9.553c-0.178-0.182-0.467-0.182-0.645,0c-0.178,0.184-0.178,0.479,0,0.662L9.513,11.973z"></path>
</svg>
<span class="badge badge-pill">Download Data</span>
</div>
<div class="" id="country_graph_new_cases"></div>
</div>
<div class="country_graph_rates_container mt-4 mb-4">
<h4 class="">Deaths rate - <span class="country_name"></span></h4>
<div class="download_data badge-pill badge float-right mb-1" onclick="download_data('country_graph_rates')">
<svg class="svg-icon" viewBox="0 0 20 20">
<path fill="none" d="M15.608,6.262h-2.338v0.935h2.338c0.516,0,0.934,0.418,0.934,0.935v8.879c0,0.517-0.418,0.935-0.934,0.935H4.392c-0.516,0-0.935-0.418-0.935-0.935V8.131c0-0.516,0.419-0.935,0.935-0.935h2.336V6.262H4.392c-1.032,0-1.869,0.837-1.869,1.869v8.879c0,1.031,0.837,1.869,1.869,1.869h11.216c1.031,0,1.869-0.838,1.869-1.869V8.131C17.478,7.099,16.64,6.262,15.608,6.262z M9.513,11.973c0.017,0.082,0.047,0.162,0.109,0.226c0.104,0.106,0.243,0.143,0.378,0.126c0.135,0.017,0.274-0.02,0.377-0.126c0.064-0.065,0.097-0.147,0.115-0.231l1.708-1.751c0.178-0.183,0.178-0.479,0-0.662c-0.178-0.182-0.467-0.182-0.645,0l-1.101,1.129V1.588c0-0.258-0.204-0.467-0.456-0.467c-0.252,0-0.456,0.209-0.456,0.467v9.094L8.443,9.553c-0.178-0.182-0.467-0.182-0.645,0c-0.178,0.184-0.178,0.479,0,0.662L9.513,11.973z"></path>
</svg>
<span class="badge badge-pill">Download Data</span>
</div>
<div id="country_graph_rates"></div>
</div>
</div>
<!-- COMPARE -->
<div class="content" id="compare">
<div id="compare_elements">
<h2 class="mt-2 mb-2">Compare by countries</h2>
<div class="container">
<div class="row mb-4" id="compare_elements_container">
</div>
</div>
</div>
<div class="btn btn-sm btn-secondary mb-2" id="compare_add" onclick="add_element()">Add Country</div>
<form class="form-inline">
<div class="form-inline mr-3">
<label class="my-1 mr-2 text-muted">Range:</label>
<select class="select-dates custom-select my-1 mr-sm-2" target="compare_graph" start>
</select>
<label class="my-1 mr-2 text-muted">To</label>
<select class="select-dates custom-select my-1 mr-sm-2" target="compare_graph" end>
</select>
</div>
<div class="my-1 mr-2 text-muted custom-switch">
<input type="checkbox" class="custom-control-input" id="logScaleSwitch2">
<label class="custom-control-label text-muted" for="logScaleSwitch2">Log scale</label>
</div>
<div class="my-1 mr-2 text-muted custom-switch">
<input type="checkbox" class="custom-control-input" id="barSwitch2">
<label class="custom-control-label text-muted" for="barSwitch2">Bars</label>
</div>
<div class="my-1 mr-2 text-muted custom-switch">
<input type="checkbox" class="custom-control-input" id="percPopulation2">
<label class="custom-control-label text-muted" for="percPopulation2">As % of population</label>
</div>
<div class="my-1 text-muted custom-switch" data-toggle="tooltip">
<label for="movingAverageCompareRange">Moving average</label>
<input type="range" class="custom-range" min="1" max="10" step="1" id="movingAverageCompareRange">
</div>
<span class="text-muted ml-2" id="movingAverageCompareValue"></span><span class="ml-1 text-muted">days</span>
</form>
<div class="download_data badge-pill badge float-right mb-1" onclick="download_data('compare_graph')">
<svg class="svg-icon" viewBox="0 0 20 20">
<path fill="none" d="M15.608,6.262h-2.338v0.935h2.338c0.516,0,0.934,0.418,0.934,0.935v8.879c0,0.517-0.418,0.935-0.934,0.935H4.392c-0.516,0-0.935-0.418-0.935-0.935V8.131c0-0.516,0.419-0.935,0.935-0.935h2.336V6.262H4.392c-1.032,0-1.869,0.837-1.869,1.869v8.879c0,1.031,0.837,1.869,1.869,1.869h11.216c1.031,0,1.869-0.838,1.869-1.869V8.131C17.478,7.099,16.64,6.262,15.608,6.262z M9.513,11.973c0.017,0.082,0.047,0.162,0.109,0.226c0.104,0.106,0.243,0.143,0.378,0.126c0.135,0.017,0.274-0.02,0.377-0.126c0.064-0.065,0.097-0.147,0.115-0.231l1.708-1.751c0.178-0.183,0.178-0.479,0-0.662c-0.178-0.182-0.467-0.182-0.645,0l-1.101,1.129V1.588c0-0.258-0.204-0.467-0.456-0.467c-0.252,0-0.456,0.209-0.456,0.467v9.094L8.443,9.553c-0.178-0.182-0.467-0.182-0.645,0c-0.178,0.184-0.178,0.479,0,0.662L9.513,11.973z"></path>
</svg>
<span class="badge badge-pill">Download Data</span>
</div>
<div class="mt-4" id="compare_graph"></div>
</div>
<!-- FT -->
<div class="content" id="ft">
<h2 class="mt-2 mb-2">Coronavirus Deaths Tracker</h2>
<p class="text-muted">This graph is an interactive version of the one designed by the <a href="https://www.ft.com/coronavirus-latest">Financial Times</a>. The y-axis is the cumulative number of deaths due to Covid-19 reported (on a log-scale) while the x-axis is the number of days since the 10th deaths due to Covid-19. The graph has been updated many times by the FT with different thresholds and y-axis (new daily deaths, cumulative number of deaths, rolling average of daily deaths, etc.) The controls below let you customized the graph at your will.</p>
<hr>
<div id="ft_countries_container"></div>
<form class="mt-4 mb-2 form-inline">
<div class="form-group mr-2">
<select class="mr-sm-2" id="ft_add_country">
</select>
</div>
<div class="my-1 mr-3 text-muted custom-switch">
<input type="checkbox" class="custom-control-input" id="logScaleSwitch3">
<label class="custom-control-label text-muted" for="logScaleSwitch3">Log scale</label>
</div>
<div class="my-1 mr-3 text-muted custom-switch">
<input type="checkbox" class="custom-control-input" id="hideLegend">
<label class="custom-control-label text-muted" for="hideLegend">Hide legend</label>
</div>
<div class="form-group text-muted">
<div class="input-group-prepend">
<label class="mr-1" for="ftCategory">Y-axis:</label>
</div>
<select class="mr-sm-2" id="ftCategory">
</select>
</div>
<div class="form-inline mr-2 ml-2">
<div class="my-1 text-muted">
<label for="thresholdRange">Since</label>
<input type="range" class="custom-range" min="10" max="1000" step="10" id="thresholdRange">
</div>
<span class="text-muted ml-2" id="thresholdValue"></span>
<span class="ml-1 text-muted mr-1">
<select class="mr-sm-2" id="ftThresholdCategory">
</select>
</span>
</div>
<div class="my-1 text-muted" data-toggle="tooltip">
<label for="movingAverageFTRange">Moving average</label>
<input type="range" class="custom-range" min="1" max="10" step="1" id="movingAverageFTRange">
</div>
<span class="text-muted ml-2" id="movingAverageFTValue"></span><span class="ml-1 text-muted">days</span>
</form>
<div class="download_data badge-pill badge float-right mb-1" onclick="download_data('ft_graph')">
<svg class="svg-icon" viewBox="0 0 20 20">
<path fill="none" d="M15.608,6.262h-2.338v0.935h2.338c0.516,0,0.934,0.418,0.934,0.935v8.879c0,0.517-0.418,0.935-0.934,0.935H4.392c-0.516,0-0.935-0.418-0.935-0.935V8.131c0-0.516,0.419-0.935,0.935-0.935h2.336V6.262H4.392c-1.032,0-1.869,0.837-1.869,1.869v8.879c0,1.031,0.837,1.869,1.869,1.869h11.216c1.031,0,1.869-0.838,1.869-1.869V8.131C17.478,7.099,16.64,6.262,15.608,6.262z M9.513,11.973c0.017,0.082,0.047,0.162,0.109,0.226c0.104,0.106,0.243,0.143,0.378,0.126c0.135,0.017,0.274-0.02,0.377-0.126c0.064-0.065,0.097-0.147,0.115-0.231l1.708-1.751c0.178-0.183,0.178-0.479,0-0.662c-0.178-0.182-0.467-0.182-0.645,0l-1.101,1.129V1.588c0-0.258-0.204-0.467-0.456-0.467c-0.252,0-0.456,0.209-0.456,0.467v9.094L8.443,9.553c-0.178-0.182-0.467-0.182-0.645,0c-0.178,0.184-0.178,0.479,0,0.662L9.513,11.973z"></path>
</svg>
<span class="badge badge-pill">Download Data</span>
</div>
<div class="mt-4" id="ft_graph"></div>
</div>
<!-- Testing -->
<div class="content" id="testing">
<h2 class="mt-2 mb-2">Covid testing data</h2>
<p class="text-muted">Testing data is retrieved from Our World In Data <a href="https://github.com/owid/covid-19-data/tree/master/public/data/testing">github repository</a>. Testing data is very heterogeneous among countries: it's often unclear what the provided numbers really mean and there are not always comparable cross-country. Our World in Data has made an amazing job explaining what we know and what we don't about the test numbers reported in <a href="https://ourworldindata.org/covid-testing">this article</a>.</p>
<hr>
<div id="testing_countries_container"></div>
<form class="mt-4 mb-2 form-inline">
<div class="form-group mr-2">
<select class="mr-sm-2" id="testing_add_country">
</select>
</div>
<div class="form-inline mr-3">
<label class="my-1 mr-2 text-muted">Range:</label>
<select class="select-dates custom-select my-1 mr-sm-2" target="testing_graph" start>
</select>
<label class="my-1 mr-2 text-muted">To</label>
<select class="select-dates custom-select my-1 mr-sm-2" target="testing_graph" end>
</select>
</div>
<div class="form-group text-muted">
<div class="input-group-prepend">
<label class="mr-1" for="testingYAxis">Y-axis:</label>
</div>
<select class="mr-sm-2" id="testingYAxis">
</select>
</div>
</form>
<div class="download_data badge-pill badge float-right mb-1" onclick="download_data('testing_graph')">
<svg class="svg-icon" viewBox="0 0 20 20">
<path fill="none" d="M15.608,6.262h-2.338v0.935h2.338c0.516,0,0.934,0.418,0.934,0.935v8.879c0,0.517-0.418,0.935-0.934,0.935H4.392c-0.516,0-0.935-0.418-0.935-0.935V8.131c0-0.516,0.419-0.935,0.935-0.935h2.336V6.262H4.392c-1.032,0-1.869,0.837-1.869,1.869v8.879c0,1.031,0.837,1.869,1.869,1.869h11.216c1.031,0,1.869-0.838,1.869-1.869V8.131C17.478,7.099,16.64,6.262,15.608,6.262z M9.513,11.973c0.017,0.082,0.047,0.162,0.109,0.226c0.104,0.106,0.243,0.143,0.378,0.126c0.135,0.017,0.274-0.02,0.377-0.126c0.064-0.065,0.097-0.147,0.115-0.231l1.708-1.751c0.178-0.183,0.178-0.479,0-0.662c-0.178-0.182-0.467-0.182-0.645,0l-1.101,1.129V1.588c0-0.258-0.204-0.467-0.456-0.467c-0.252,0-0.456,0.209-0.456,0.467v9.094L8.443,9.553c-0.178-0.182-0.467-0.182-0.645,0c-0.178,0.184-0.178,0.479,0,0.662L9.513,11.973z"></path>
</svg>
<span class="badge badge-pill">Download Data</span>
</div>
<div class="mt-4" id="testing_graph"></div>
</div>
<!-- Mobility -->
<div class="content" id="mobility">
<h2 class="mt-2 mb-2">Apple Mobility Data</h2>
<p class="text-muted">Mobility Data is retrieved from this <a href="https://github.com/ActiveConclusion/COVID19_mobility">github repository</a> that compiles data from <a href="https://www.apple.com/covid19/mobility">Apple Mobility Trends Reports</a>. Data is updated daily. Note that not every transportation types are available for each region and that for May 11-12 is not available.</i></p>
<hr>
<div id="mobility_container">
<div class="row mb-4" id="mobility_elements_container">
</div>
</div>
<div class="btn btn-sm btn-secondary mb-2" id="mobility_add" onclick="add_mobility_element()">Add Country</div>
<form class="form-inline">
<div class="form-inline mr-3">
<label class="my-1 mr-2 text-muted">Range:</label>
<select class="select-dates custom-select my-1 mr-sm-2" target="mobility_graph" start>
</select>
<label class="my-1 mr-2 text-muted">To</label>
<select class="select-dates custom-select my-1 mr-sm-2" target="mobility_graph" end>
</select>
</div>
<div class="my-1 mr-2 text-muted custom-switch">
<input type="checkbox" class="custom-control-input" id="barSwitch4">
<label class="custom-control-label text-muted" for="barSwitch4">Bars</label>
</div>
<div class="my-1 mr-3 text-muted custom-switch">
<input type="checkbox" class="custom-control-input" id="hideLegendMobility">
<label class="custom-control-label text-muted" for="hideLegendMobility">Hide legend</label>
</div>
</form>
<div class="download_data badge-pill badge float-right mb-1" onclick="download_data('mobility_graph')">
<svg class="svg-icon" viewBox="0 0 20 20">
<path fill="none" d="M15.608,6.262h-2.338v0.935h2.338c0.516,0,0.934,0.418,0.934,0.935v8.879c0,0.517-0.418,0.935-0.934,0.935H4.392c-0.516,0-0.935-0.418-0.935-0.935V8.131c0-0.516,0.419-0.935,0.935-0.935h2.336V6.262H4.392c-1.032,0-1.869,0.837-1.869,1.869v8.879c0,1.031,0.837,1.869,1.869,1.869h11.216c1.031,0,1.869-0.838,1.869-1.869V8.131C17.478,7.099,16.64,6.262,15.608,6.262z M9.513,11.973c0.017,0.082,0.047,0.162,0.109,0.226c0.104,0.106,0.243,0.143,0.378,0.126c0.135,0.017,0.274-0.02,0.377-0.126c0.064-0.065,0.097-0.147,0.115-0.231l1.708-1.751c0.178-0.183,0.178-0.479,0-0.662c-0.178-0.182-0.467-0.182-0.645,0l-1.101,1.129V1.588c0-0.258-0.204-0.467-0.456-0.467c-0.252,0-0.456,0.209-0.456,0.467v9.094L8.443,9.553c-0.178-0.182-0.467-0.182-0.645,0c-0.178,0.184-0.178,0.479,0,0.662L9.513,11.973z"></path>
</svg>
<span class="badge badge-pill">Download Data</span>
</div>
<div class="mt-4" id="mobility_graph"></div>
</div>
<!-- Hospitalization -->
<div class="content" id="hospitalization">
<h2 class="mt-2 mb-2">SOS Medecins Data</h2>
<p class="text-muted">Hospital emergency department and SOS Medecins data related to the COVID epidemic-19 (for France only). Regional data is retrieved from <a href="https://www.data.gouv.fr/en/datasets/donnees-des-urgences-hospitalieres-et-de-sos-medecins-relatives-a-lepidemie-de-covid-19/">data.gouv.fr</a> and preprocessed daily (aggregation across regions, age groups and genders).</p>
<hr>
<div id="hospitalization_container">
<div class="row mb-4" id="hospitalization_elements_container">
</div>
</div>
<form class="form-inline">
<div class="form-group">
<select class="custom-select my-1 mr-sm-2 select-camouflaged" id="hospitalization_variables" multiple>
</select>
</div>
<div class="form-inline mr-3">
<label class="my-1 mr-2 text-muted">Range:</label>
<select class="select-dates custom-select my-1 mr-sm-2" target="hospitalization_graph" start>
</select>
<label class="my-1 mr-2 text-muted">To</label>
<select class="select-dates custom-select my-1 mr-sm-2" target="hospitalization_graph" end>
</select>
<div class="my-1 mr-2 text-muted custom-switch">
<input type="checkbox" class="custom-control-input" id="barSwitch5">
<label class="custom-control-label text-muted" for="barSwitch5">Bars</label>
</div>
<div class="my-1 mr-3 text-muted custom-switch">
<input type="checkbox" class="custom-control-input" id="hideLegendHospitalization">
<label class="custom-control-label text-muted" for="hideLegendHospitalization">Hide legend</label>
</div>
<div class="my-1 text-muted custom-switch" data-toggle="tooltip">
<label for="movingAverageHospitalizationRange">Moving average</label>
<input type="range" class="custom-range" min="1" max="10" step="1" id="movingAverageHospitalizationRange">
</div>
<span class="text-muted ml-2" id="movingAverageHospitalizationValue"></span><span class="ml-1 text-muted">days</span>
</div>
</form>
<div class="download_data badge-pill badge float-right mb-1" onclick="download_data('hospitalization_graph')">
<svg class="svg-icon" viewBox="0 0 20 20">
<path fill="none" d="M15.608,6.262h-2.338v0.935h2.338c0.516,0,0.934,0.418,0.934,0.935v8.879c0,0.517-0.418,0.935-0.934,0.935H4.392c-0.516,0-0.935-0.418-0.935-0.935V8.131c0-0.516,0.419-0.935,0.935-0.935h2.336V6.262H4.392c-1.032,0-1.869,0.837-1.869,1.869v8.879c0,1.031,0.837,1.869,1.869,1.869h11.216c1.031,0,1.869-0.838,1.869-1.869V8.131C17.478,7.099,16.64,6.262,15.608,6.262z M9.513,11.973c0.017,0.082,0.047,0.162,0.109,0.226c0.104,0.106,0.243,0.143,0.378,0.126c0.135,0.017,0.274-0.02,0.377-0.126c0.064-0.065,0.097-0.147,0.115-0.231l1.708-1.751c0.178-0.183,0.178-0.479,0-0.662c-0.178-0.182-0.467-0.182-0.645,0l-1.101,1.129V1.588c0-0.258-0.204-0.467-0.456-0.467c-0.252,0-0.456,0.209-0.456,0.467v9.094L8.443,9.553c-0.178-0.182-0.467-0.182-0.645,0c-0.178,0.184-0.178,0.479,0,0.662L9.513,11.973z"></path>
</svg>
<span class="badge badge-pill">Download Data</span>
</div>
<div class="mt-4" id="hospitalization_graph"></div>
</div>
<!-- ISSUES -->
<div class="content p-4" id="issues">
<center><h3>Content and data issues</h3></center>
<hr>
<p class="alert alert-secondary">This website does not store data. Data is fetched from the repositories listed below and processed every time this website loads.</p>
<p>Data of COVID-19 cases is retrieved from Johns Hopkins University <a href="https://github.com/CSSEGISandData/COVID-19">github repository</a>. Browse it to know more about potential errors or data issues.</p>
<p>Population data is from the <a href="https://data.worldbank.org/indicator/SP.POP.TOTL">World Bank</a> for most of the countries and from national statistics institute for others. Population data is from 2018 and is stored here <a href="https://github.com/louisdecharson/covid-19/blob/master/population_data.csv">github.com/louisdecharson/covid-19/population_data.csv</a>.</p>
<p>Testing data is retrieved <a href="https://github.com/owid/covid-19-data/tree/master/public/data/testing">Our World in Data github repository</a>. They wrote an amazing article on the pitfalls of testing data which you can read <a href="https://ourworldindata.org/covid-testing">here</a>.</p>
<p>The code is on <a href="http://github.com/louisdecharson/covid-19">Github.</a></p>
<h4 class="mt-4 text-orange">Issues</h4>
<table class="list-issues">
<tr><td class="align-top pr-2">12/03/2020</td><td>Data for <strong>12/03/2020</strong> appears to be wrong for some European countries. No new cases has been reported in the data contrary to figures reported in other sources. Read more <a href="https://github.com/CSSEGISandData/COVID-19/issues/599">here</a>.</td></tr>
<tr><td class="align-top pr-2">23/03/2020</td><td>Johns Hopkins University <a href="https://github.com/CSSEGISandData/COVID-19/commit/6eab8cc908dff4d44b631053582ad4311f50ebcb#diff-eb3e961500680278537f38c751212d2e">has stopped</a> publishing recovered cases data.</td></tr>
</table>
</div>
<!-- BUG Report -->
<div class="content p-4" id="settings">
<h3>Custom settings</h3>
<hr>
<div class="text-muted">
<p>Customize the dashboard by setting your own font sizes. Currently only the font size for axis can be customized, if you want more, write me an email.</p>
</div>
<form id="form_settings" class="mb-2">
<!-- <div class="form-group">
<label for="fontSizeAxisTickText">Font size axis tick text</label>
<input id="fontSizeAxisTickText" type="text" class="setting form-control form-control-sm mx-sm-3" target=".grapherContainer .tick text" css="font-size" value="12px">
<label for="fontSizeAxisTickText">Font size axis label</label>
<input id="fontSizeAxisTickText" type="text" class="setting form-control form-control-sm mx-sm-3" target=".grapherContainer .axisLabel text" css="font-size" value="16px">
</div> -->
</form>
<button id="save_settings" class="btn btn-sm btn-secondary">Save</button>
</div>
<!-- BUG Report -->
<div class="content p-4" id="bugs">
<center><h3>Report a bug</h3></center>
<hr>
<div class="">
<p><strong>You have noticed a bug</strong> ? Report it on <a href="http://github.com/louisdecharson/covid-19/issues">GitHub</a> or send me an email at <a href="" id="emailaddress"></a>.</p>
<p><strong>Please include the following elements:</strong></p>
<ul>
<li>Specifically say what is wrong, i.e. what you expected vs what the website displayed instead.</li>
<li>Include information about your browser and configuration. If you can, include also the output of your web navigator console by opening up your <a href="http://debugbrowser.com/">browser debugging tools</a>.</li>
</ul>
</div>
</div>
</main>
</div>
</div>
<!-- SCRIPTS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.15.0/d3.min.js" integrity="sha256-m0QmIsBXcOMiETRmpT3qg2IQ/i0qazJA2miCHzOmS1Y=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<script>
let ea = location.href.substring(8, 22) + "@posteo.net";
document.getElementById('emailaddress').innerHTML = ea;
document.getElementById('emailaddress').setAttribute("href",`mailto:${ea}?Subject=Bug%20Report%20-%20Covid%20Data%20Dashboard`);
</script>
<script src="./grapher.min.js"></script>
<script src="./covid.js"></script>
<script async defer src="https://scripts.simpleanalyticscdn.com/latest.js"></script>
<noscript><img src="https://api.simpleanalytics.io/hello.gif" alt=""></noscript>
</body>
</html>