index.html 28 KB
Newer Older
1
2
<html>
    <head>
3
        <meta charset="utf-8"/>
4
        <title>Scary COVID-19 Data</title>
Michał Woźniak's avatar
Michał Woźniak committed
5
        <link rel="shortcut icon" href="./favicon.ico">
Michał Woźniak's avatar
fix    
Michał Woźniak committed
6
        <script src="./wtf_wikipedia-client.min.js"></script>
Michał Woźniak's avatar
charts!    
Michał Woźniak committed
7
        <script src="./Chart.bundle.min.js"></script>
Michał Woźniak's avatar
fix    
Michał Woźniak committed
8
        <script src="./covid.js"></script>
Michał Woźniak's avatar
Michał Woźniak committed
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
        <style>
            @font-face {
                font-family: "Play Regular";
                src: url(./Play/Play-Regular.ttf);
            }
            @font-face {
                font-family: "Play Bold";
                src: url(./Play/Play-Bold.ttf);
            }
            body {
                background: #444;
                color: springgreen;
                font-family: "Play Regular";
                padding:0px;
                margin:0px;
                font-size: 16pt;
Michał Woźniak's avatar
Michał Woźniak committed
25
26
27
                display: flex;
                flex-direction: column;
                min-height:100vh;
Michał Woźniak's avatar
Michał Woźniak committed
28
                min-width:600px;
Michał Woźniak's avatar
Michał Woźniak committed
29
30
31
32
33
34
35
36
37
38
            }
            body > * {
                padding-left:5vw;
                padding-right:5vw;
            }
            body > * > * {
                text-shadow: none;
            }
            h1 {
                text-align:center;
Michał Woźniak's avatar
Michał Woźniak committed
39
40
41
42
43
44
                padding-top:2em;
                padding-bottom:0.7em;
                font-family: "Play Regular";
                font-weight: normal;
                font-size: 260%;
                text-shadow:-1px -1px 1px black, 1px 1px 0px #888;
Michał Woźniak's avatar
Michał Woźniak committed
45
            }
Michał Woźniak's avatar
Michał Woźniak committed
46
            h2, h3, h4, h5, h6, h7, strong {
Michał Woźniak's avatar
Michał Woźniak committed
47
48
49
50
51
52
                font-family: "Play Bold";
            }
            a {
                color: yellow;
            }
            
53
54
55
56
57
            input[type=button] {
                display:inline-block;
                border:none;
                border-radius:0.2em;
                color:springgreen;
Michał Woźniak's avatar
Michał Woźniak committed
58
59
                font-family: "Play Regular";
                font-weight: bold;
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
                font-size: 100%;
                padding:0.4em 1em 0.5em 1em;
                background:#555;
                box-shadow:0px 0px 2px #555;
                font-variant: all-small-caps;
                transition: box-shadow 0.5s, color 0.5s, background-color 0.5s;
            }
            input[type=button]:hover {
                color:black;
                background:springgreen;
                box-shadow:0px 0px 2px springgreen;
            }
            input[type=button]:active {
                box-shadow:inset 0px 0px 2px #444;
            }
            
Michał Woźniak's avatar
Michał Woźniak committed
76
77
78
79
80
81
82
83
84
85
86
87
88
89
            #covid-stats {
                display: grid;
                grid-auto-flow: column;
                background: springgreen;
                color: #444;
            }
            #covid-stats > * {
                margin:0em;
                padding:0.5em;
                display: grid;
            }
            #covid-stats .value {
                font-weight: bold;
                font-family: "Play Bold";
Michał Woźniak's avatar
Michał Woźniak committed
90
                align-self: end;
Michał Woźniak's avatar
Michał Woźniak committed
91
            }
Michał Woźniak's avatar
Michał Woźniak committed
92
            #covid-stats h2 {
Michał Woźniak's avatar
Michał Woźniak committed
93
94
95
96
                font-size: 140%;
                font-family: "Play Regular";
                font-weight: bold;
                text-transform: uppercase;
Michał Woźniak's avatar
Michał Woźniak committed
97
                color: #444;
Michał Woźniak's avatar
Michał Woźniak committed
98
                opacity: 0.4;
99
100
101
102
103
104
105
                margin:0px;
            }
            #covid-stats .item-container {
                display: flex;
                justify-content: center;
                align-items: center;
            }
106
            #main-menu-container {
107
108
                padding-top: 1.2rem;
                padding-bottom: 1.2rem;
109
                font-size:80%;
Michał Woźniak's avatar
Michał Woźniak committed
110
111
112
113
114
115
                /*
                    site data containers      :  3 ×   30rem
                  + padding between them      :  2 ×    2rem
                  + menu buttons outer margin :  2 × 0.25rem
                */
                max-width:94.5rem;
Michał Woźniak's avatar
Michał Woźniak committed
116
                margin:auto;
117
118
119
120
121
122
            }
            #internal-main-menu-container {
                display:flex;
                flex-wrap:wrap;
                justify-content:center;
            }
123
            #internal-main-menu-container p {
124
                font-size: 100%;
Michał Woźniak's avatar
Michał Woźniak committed
125
                margin: 0.15rem 0.25rem;
126
127
128
                padding: 0.5em 1em 0.5em 0.2em;
            }
            #internal-main-menu-container input[type=button] {
Michał Woźniak's avatar
Michał Woźniak committed
129
                margin: 0.25rem;
130
131
                flex-grow:1;
                flex-shrink:1;
132
133
                padding-left:0.5em;
                padding-right:0.5em;
Michał Woźniak's avatar
Michał Woźniak committed
134
                min-width:15em;
135
            }
Michał Woźniak's avatar
Michał Woźniak committed
136
            .sources {
Michał Woźniak's avatar
Michał Woźniak committed
137
138
139
140
141
142
                font-size: 80%;
                font-style: italic;
                margin-top: 0.4em;
                text-align: right;
                opacity: 0.5;
            }
143
            .site-data {
Michał Woźniak's avatar
Michał Woźniak committed
144
                display: grid;
Michał Woźniak's avatar
Michał Woźniak committed
145
                grid-template-columns: auto auto auto;
Michał Woźniak's avatar
Michał Woźniak committed
146
147
                grid-template-rows: auto auto auto;
                grid-template-areas: 
Michał Woźniak's avatar
Michał Woźniak committed
148
149
150
                    "auto auto auto"
                    "auto auto auto"
                    "sources sources sources";
Michał Woźniak's avatar
Michał Woźniak committed
151
152
153
                grid-auto-flow: row;
                padding-top:1em;
                padding-bottom:1em;
Michał Woźniak's avatar
Michał Woźniak committed
154
            }
155
            .site-data > * {
Michał Woźniak's avatar
Michał Woźniak committed
156
                display: grid;
Michał Woźniak's avatar
Michał Woźniak committed
157
158
159
                margin:0px;
                padding:0.5em;
            }
160
            .site-data > h2 {
Michał Woźniak's avatar
Michał Woźniak committed
161
162
                grid-area: header;
            }
163
            .site-data > .sources {
Michał Woźniak's avatar
Michał Woźniak committed
164
                grid-area: sources;
Michał Woźniak's avatar
Michał Woźniak committed
165
            }
166
            .site-data > * .value {
Michał Woźniak's avatar
Michał Woźniak committed
167
168
169
                font-weight: bold;
                font-family: "Play Bold";
            }
170
            #sites-data-container {
Michał Woźniak's avatar
Michał Woźniak committed
171
                flex-grow:1;
172
173
                display: flex;
                flex-direction: row;
174
                align-items:stretch;
175
176
                justify-content: center;
                flex-wrap: wrap;
177
                min-height:8em;
178
179
            }
            #sites-data-container .site-data-container {
Michał Woźniak's avatar
Michał Woźniak committed
180
                display: flex;
Michał Woźniak's avatar
Michał Woźniak committed
181
                flex-direction: column;
182
                align-items:center;
183
184
                width:30rem;
                padding: 1rem;
Michał Woźniak's avatar
Michał Woźniak committed
185
            }
Michał Woźniak's avatar
Michał Woźniak committed
186
187
188
189
190
191
192
193
            footer {
                font-size: 70%;
                text-align:center;
                opacity:0.8;
                line-height:150%;
                font-family: Monospace;
                background: black;
            }
194
            .site-data-container .sites-select {
Michał Woźniak's avatar
Michał Woźniak committed
195
196
197
198
                -moz-appearance: none;
                -webkit-appearance: none;
                appearance: none;
                border:dotted 1px springgreen;
199
                padding:0 0.5em;
Michał Woźniak's avatar
Michał Woźniak committed
200
201
202
203
                background:none;
                color:springgreen;
                font-family: inherit;
                font-size:inherit;
204
                min-width:27rem;
205
                transition: box-shadow 0.5s;
206
207
208
209
                height: 3.2rem;
                box-sizing: content-box;
                display: block;
                flex-grow: 1;
Michał Woźniak's avatar
Michał Woźniak committed
210
            }
211
212
213
            .site-data-container .sites-select:hover {
                box-shadow: 0px 0px 5px springgreen;
            }
214
            .site-data-container .sites-select option {
215
216
                font-size:70%;
            }
217
            .site-data-container h2 {
Michał Woźniak's avatar
Michał Woźniak committed
218
219
220
221
222
                font-family: "Play Regular";
                font-weight: normal;
                margin-top:0.35em;
            }
            .site-data-container h2.for-select {
Michał Woźniak's avatar
Michał Woźniak committed
223
                position:relative;
Michał Woźniak's avatar
Michał Woźniak committed
224
                font-size:140%;
225
226
227
228
                margin: 0;
                padding: 0px;
                display: flex;
                width: 100%;
Michał Woźniak's avatar
Michał Woźniak committed
229
            }
Michał Woźniak's avatar
Michał Woźniak committed
230
            .site-data-container h2.for-select::after {
Michał Woźniak's avatar
Michał Woźniak committed
231
232
233
234
235
236
                position:absolute;
                right:0.5em;
                top:0.25em;
                content: "▾";
                display: block;
                color: springgreen;
237
238
                z-index: -10; /* needed to not obscure the select box from clicks */
            }
239
            .sites-menu-container {
240
241
                width:0px;
                padding-top: 1rem;
Michał Woźniak's avatar
Michał Woźniak committed
242
            }
243
244
245
            .sites-menu-container > input {
                display:none;
            }
246
            .sites-menu-container > a {
247
248
249
250
251
                font-size: 250%;
                text-decoration: none;
                border: dotted 1px springgreen;
                line-height: 90%;
                outline:none;
Michał Woźniak's avatar
Michał Woźniak committed
252
                text-align:center;
253
                color: springgreen;
254
                display: none;
255
                cursor: pointer;
256
                transition: box-shadow 0.5s;
257
258
259
                width: 3.2rem;
                height: 3.2rem;
                margin-bottom: 0.5rem;
260
261
262
            }
            .sites-menu-container > a:hover {
                box-shadow: 0px 0px 5px springgreen;
Michał Woźniak's avatar
Michał Woźniak committed
263
264
265
            }
            #add-site.visible {
                display: inline-block;
266
            }
267
            .site-data-container:nth-of-type(7) + .sites-menu-container > #add-site {
Michał Woźniak's avatar
Michał Woźniak committed
268
269
                display:none;
            }
270
            .site-data-container:nth-of-type(3) ~ .sites-menu-container > #remove-site {
271
272
                display:inline-block;
            }
273
            .sites-menu-container.left > a {
Michał Woźniak's avatar
Michał Woźniak committed
274
                display: inline-block;
275
276
277
278
279
                margin-left: -4.2rem;
            }
            .sites-menu-container.right {
                position: relative;
                left: 1rem;
280
            }
Michał Woźniak's avatar
Michał Woźniak committed
281
            #the-chart-container {
282
283
                height:80vh;
                min-height:600px;
Michał Woźniak's avatar
Michał Woźniak committed
284
285
286
                background: #333;
                padding-top: 1em;
                padding-bottom: 1em;
Michał Woźniak's avatar
Michał Woźniak committed
287
            }
Michał Woźniak's avatar
charts!    
Michał Woźniak committed
288
            #the-chart {
Michał Woźniak's avatar
Michał Woźniak committed
289
                display:block;
Michał Woźniak's avatar
charts!    
Michał Woźniak committed
290
            }
291
292
293
            #disclaimers-container {
                font-size:80%;
            }
294
295
296
297
298
            .chart-config-container {
                margin-top:1em;
                display:flex;
                justify-content: center;
                font-size:80%;
299
                flex-wrap: wrap;
300
301
302
            }
            .chart-config-container input {
                display:none;
303
304
305
306
307
308
309
310
            }
            .chart-config-container label input {
                display:inline-block;
                background:none;
                border:none;
                font-weight: bold;
                color:springgreen;
            }
311
312
            .chart-config-container #chart-reset-settings {
                display:inline-block;
313
            }
314
            .chart-config-container label {
315
316
317
318
319
                padding: 0.5em;
                border-radius:0.2em;
                background:#404040;
                box-shadow: inset 0px 0px 2px #333;
            }
320
321
322
            /*
             * chart controls mechanics
             */
323
324
325
            .chart-config-container input#chart-data-confirmed:checked ~ .chart-config-group label[for=chart-data-confirmed],
            .chart-config-container input#chart-data-recovered:checked ~ .chart-config-group label[for=chart-data-recovered],
            .chart-config-container input#chart-data-deaths:checked ~ .chart-config-group label[for=chart-data-deaths],
Michał Woźniak's avatar
Michał Woźniak committed
326
            .chart-config-container input#chart-data-active:checked ~ .chart-config-group label[for=chart-data-active],
327
            .chart-config-container input#chart-data-cfr:checked ~ .chart-config-group label[for=chart-data-cfr],
328
            .chart-config-container input#chart-cases-cumulative:checked ~ .chart-config-group label[for=chart-cases-cumulative],
329
            .chart-config-container input#chart-cases-delta:checked ~ .chart-config-group label[for=chart-cases-delta],
330
            .chart-config-container input#chart-data-active:not(:checked) ~ input#chart-data-cfr:not(:checked) ~ input#chart-type-logarithmic:checked ~ .chart-config-group label[for=chart-type-logarithmic],
331
332
            .chart-config-container input#chart-data-active:not(:checked) ~ input#chart-cases-delta:not(:checked) ~ input#chart-type-logarithmic:checked ~ .chart-config-group label[for=chart-type-logarithmic],
            .chart-config-container input#chart-data-cfr:not(:checked) ~ input#chart-cases-delta:not(:checked) ~ input#chart-type-logarithmic:checked ~ .chart-config-group label[for=chart-type-logarithmic],
333
            .chart-config-container input#chart-type-linear:checked ~ .chart-config-group label[for=chart-type-linear],
334
335
            .chart-config-container input#chart-data-active:checked ~ input#chart-cases-delta:checked ~ .chart-config-group label[for=chart-type-linear],
            .chart-config-container input#chart-data-cfr:checked ~ input#chart-cases-delta:checked ~ .chart-config-group label[for=chart-type-linear],
336
            .chart-config-container input#chart-values-absolute:checked ~ .chart-config-group label[for=chart-values-absolute],
337
            .chart-config-container input#chart-data-cfr:checked ~ .chart-config-group label[for=chart-values-absolute],
Michał Woźniak's avatar
Michał Woźniak committed
338
            .chart-config-container input#chart-data-cfr:not(:checked) ~ input#chart-values-permillion:checked ~ .chart-config-group label[for=chart-values-permillion],
339
            .chart-config-container input#chart-start-date:checked ~ .chart-config-group label[for=chart-start-date],
340
341
342
343
            .chart-config-container input#chart-start-first:checked ~ .chart-config-group label[for=chart-start-first],
            .chart-config-container input#chart-start-tenth:checked ~ .chart-config-group label[for=chart-start-tenth],
            .chart-config-container input#chart-start-hundredth:checked ~ .chart-config-group label[for=chart-start-hundredth],
            .chart-config-container input#chart-start-thousandth:checked ~ .chart-config-group label[for=chart-start-thousandth] {
344
345
346
347
                background:springgreen;
                color:black;
                box-shadow: 0px 0px 2px springgreen;
            }
348
349
            .chart-config-container input#chart-data-active:checked ~ input#chart-cases-delta:checked ~ .chart-config-group label[for=chart-type-logarithmic],
            .chart-config-container input#chart-data-cfr:checked ~ input#chart-cases-delta:checked ~ .chart-config-group label[for=chart-type-logarithmic],
Michał Woźniak's avatar
Michał Woźniak committed
350
            .chart-config-container input#chart-data-cfr:checked ~ .chart-config-group label[for=chart-values-permillion] {
351
352
353
                opacity:0.5;
                pointer-events: none; 
            }
354
355
356
            .chart-config-container input#chart-start-date:checked ~ .chart-config-group label[for=chart-start-date] > input {
                color:black;
            }
357
358
359
            .chart-config-group {
                display:flex;
                justify-content: center;
360
361
362
363
364
                margin:0.5em 1em;
            }
            .chart-config-group > p {
                margin:0em;
                padding:0.5em;
365
            }
Michał Woźniak's avatar
Michał Woźniak committed
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
            .chart-config-group .cases-cases,
            .chart-config-group .cases-recoveries,
            .chart-config-group .cases-deaths,
            .chart-config-group .cases-chart {
                display:none;
            }
            .chart-config-container input#chart-data-confirmed:checked ~ .chart-config-group .cases-cases,
            .chart-config-container input#chart-data-recovered:checked ~ .chart-config-group .cases-recoveries,
            .chart-config-container input#chart-data-deaths:checked ~ .chart-config-group .cases-deaths,
            .chart-config-container input#chart-data-active:checked ~ .chart-config-group .cases-cases,
            .chart-config-container input#chart-data-cfr:checked ~ .chart-config-group .cases-chart {
                display:inline;
            }
            .chart-config-group .values-cumulative,
            .chart-config-group .values-count,
Michał Woźniak's avatar
Michał Woźniak committed
381
            .chart-config-group .values-values {
Michał Woźniak's avatar
Michał Woźniak committed
382
383
384
385
386
387
                display:none;
            }
            .chart-config-container input#chart-data-confirmed:checked ~ .chart-config-group .values-cumulative,
            .chart-config-container input#chart-data-recovered:checked ~ .chart-config-group .values-cumulative,
            .chart-config-container input#chart-data-deaths:checked ~ .chart-config-group .values-cumulative,
            .chart-config-container input#chart-data-active:checked ~ .chart-config-group .values-count,
Michał Woźniak's avatar
Michał Woźniak committed
388
            .chart-config-container input#chart-data-cfr:checked ~ .chart-config-group .values-values {
Michał Woźniak's avatar
Michał Woźniak committed
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
                display:inline;
            }
            .chart-config-container input#chart-data-confirmed:checked ~ .chart-config-group .delta-new,
            .chart-config-container input#chart-data-recovered:checked ~ .chart-config-group .delta-new,
            .chart-config-container input#chart-data-deaths:checked ~ .chart-config-group .delta-new,
            .chart-config-container input#chart-data-active:checked ~ .chart-config-group .delta-change,
            .chart-config-container input#chart-data-cfr:checked ~ .chart-config-group .delta-change {
                display:inline;
            }
            .chart-config-group .delta-new,
            .chart-config-group .delta-change {
                display:none;
            }
            .chart-config-container input#chart-data-confirmed:checked ~ .chart-config-group .delta-new,
            .chart-config-container input#chart-data-recovered:checked ~ .chart-config-group .delta-new,
            .chart-config-container input#chart-data-deaths:checked ~ .chart-config-group .delta-new,
            .chart-config-container input#chart-data-active:checked ~ .chart-config-group .delta-change,
            .chart-config-container input#chart-data-cfr:checked ~ .chart-config-group .delta-change {
                display:inline;
            }
Michał Woźniak's avatar
Michał Woźniak committed
409
            .chart-config-group .permillion,
410
411
            .chart-config-group .data-confirmed,
            .chart-config-group .data-recovered,
412
            .chart-config-group .data-deaths {
413
414
                display:none;
            }
Michał Woźniak's avatar
Michał Woźniak committed
415
            .chart-config-container input#chart-values-permillion:checked ~ .chart-config-group .permillion,
416
417
            .chart-config-container input#chart-data-confirmed:checked ~ .chart-config-group .data-confirmed,
            .chart-config-container input#chart-data-recovered:checked ~ .chart-config-group .data-recovered,
Michał Woźniak's avatar
Michał Woźniak committed
418
            .chart-config-container input#chart-data-deaths:checked ~ .chart-config-group .data-deaths,
419
420
            .chart-config-container input#chart-data-active:checked ~ .chart-config-group .data-confirmed,
            .chart-config-container input#chart-data-cfr:checked ~ .chart-config-group .data-confirmed {
421
422
                display:inline;
            }
423
            /* doesn't make any sense for CFR */
Michał Woźniak's avatar
Michał Woźniak committed
424
            .chart-config-container input#chart-data-cfr:checked ~ .chart-config-group .permillion {
425
426
                display:none
            }
427
428
429
            .chart-config-group.chart-average {
                display:none;
            }
430
            .chart-config-container input#chart-cases-delta:checked ~ .chart-config-group.chart-average {
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
                display:flex;
            }
            .chart-config-container #chart-average {
                display: inline;
                -webkit-appearance: none;
                -moz-appearance: none;
                appearance: none;
                color:springgreen;
                width: 4em;
                text-align: center;
                padding: 0.5em;
                border: none;
                border-radius:0.2em;
                background:#404040;
                box-shadow: inset 0px 0px 2px #333;
                font-weight:bold;
            }
448
449
450
451
            .chart-config-container .break {
                flex-basis: 100%;
                height: 0;
            }
Michał Woźniak's avatar
Michał Woźniak committed
452
        </style>
453
454
    </head>
    <body>
455
456
        <h1>Scary COVID-19 data</h1>
        <div id="covid-stats">
457
458
459
460
            <div class="item-container"><h2>Global stats</h2></div>
            <div id="confirmed"><span class="label">Confirmed cases:</span> <span class="value">(loading...)</span></div>
            <div id="deaths"><span class="label">Deaths:</span> <span class="value">(loading...)</span></div>
            <div id="recovered"><span class="label">Recovered:</span> <span class="value">(loading...)</span></div>
461
            <div id="death-to-case"><span class="label">Death-to-case ratio:</span> <span class="value">(loading...)</span></div>
462
        </div>
463
        <div class="sources"><a href="https://github.com/CSSEGISandData/COVID-19">source</a></div>
464
        <div id="main-menu-container">
465
            <div id="internal-main-menu-container">
466
                <p>Load 6 sites with at least 100 confirmed cases and:</p>
467
468
469
                <input type="button" id="site-menu-button-rate" value="largest growth rate"/>
                <input type="button" id="site-menu-button-percentage" value="highest percentage of population infected"/>
                <input type="button" id="site-menu-button-deaths" value="most deaths"/>
470
                <input type="button" id="site-menu-button-death-to-case" value="highest death-to-case ratio"/>
471
                <input type="button" id="site-menu-button-highest-cfr" value="highest case fatality rate"/>
472
                <input type="button" id="site-menu-button-recovered" value="most recoveries"/>
473
                <input type="button" id="site-menu-button-active-drop" value="greatest daily drop of number of active cases"/>
Michał Woźniak's avatar
Michał Woźniak committed
474
            </div>
475
476
        </div>
        <div id="sites-data-container">
Michał Woźniak's avatar
Michał Woźniak committed
477
            <div class="sites-menu-container left">
478
                <a href="#clear-all" id="clear-all-sites">×</a>
Michał Woźniak's avatar
Michał Woźniak committed
479
            </div>
480
            <div class="site-data-container">
Michał Woźniak's avatar
Michał Woźniak committed
481
                <h2 class="for-select"><select class="sites-select" tabindex="1">
482
483
484
485
                    <option value="select one">(select an area)</option>
                </select></h2>
                <div class="site-data">
                </div>
Michał Woźniak's avatar
Michał Woźniak committed
486
            </div>
487
            <div  class="sites-menu-container right">
488
489
490
                <a href="#add-site" id="add-site">+</a>
                <a href="#remove-site" id="remove-site">-</a>
            </div>
491
        </div>
Michał Woźniak's avatar
charts!    
Michał Woźniak committed
492
493
        <div id="the-chart-container">
            <canvas id="the-chart"></canvas>
Michał Woźniak's avatar
Michał Woźniak committed
494
495
        </div>
        <div class="chart-config-container">
496
            <input type="radio" id="chart-data-confirmed" name="chart-data" value="confirmed" checked="checked"/>
497
            <input type="radio" id="chart-data-recovered" name="chart-data" value="recovered"/>
498
            <input type="radio" id="chart-data-deaths" name="chart-data" value="deaths"/>
Michał Woźniak's avatar
Michał Woźniak committed
499
            <input type="radio" id="chart-data-active" name="chart-data" value="active"/>
500
            <input type="radio" id="chart-data-cfr" name="chart-data" value="cfr"/>
501
            <input type="radio" id="chart-cases-cumulative" name="chart-cases" value="cumulative" checked="checked"/>
502
            <input type="radio" id="chart-cases-delta" name="chart-cases" value="new"/>
503
504
            <input type="radio" id="chart-type-logarithmic" name="chart-type" value="logarithmic" checked="checked"/>
            <input type="radio" id="chart-type-linear" name="chart-type" value="linear"/>
505
            <input type="radio" id="chart-values-absolute" name="chart-values" value="absolute" checked="checked"/>
Michał Woźniak's avatar
Michał Woźniak committed
506
            <input type="radio" id="chart-values-permillion" name="chart-values" value="permillion"/>
507
            <input type="radio" id="chart-start-date" name="chart-start" value="date"/>
508
509
510
511
            <input type="radio" id="chart-start-first" name="chart-start" value="1"/>
            <input type="radio" id="chart-start-tenth" name="chart-start" value="10" checked="checked"/>
            <input type="radio" id="chart-start-hundredth" name="chart-start" value="100"/>
            <input type="radio" id="chart-start-thousandth" name="chart-start" value="1000"/>
512
            <div class="chart-config-group">
513
514
515
516
                <p>Show:</p>
                <label for="chart-data-confirmed">confirmed cases</label>
                <label for="chart-data-recovered">recoveries</label>
                <label for="chart-data-deaths">deaths</label>
Michał Woźniak's avatar
Michał Woźniak committed
517
                <label for="chart-data-active">active cases</label>
518
                <label for="chart-data-cfr">case fatality rate</label>
519
            </div>
Michał Woźniak's avatar
Michał Woźniak committed
520
521
522
523
524
            <div class="chart-config-group">
                <p>Scale:</p>
                <label for="chart-type-logarithmic">logarithmic</label>
                <label for="chart-type-linear">linear</label>
            </div>
525
            <div class="break"></div>
Michał Woźniak's avatar
Michał Woźniak committed
526
            <div class="chart-config-group">
Michał Woźniak's avatar
Michał Woźniak committed
527
                <p><span class="cases-cases">Cases</span><span class="cases-recoveries">Recoveries</span><span class="cases-deaths">Deaths</span><span class="cases-chart">Chart</span>:</p>
Michał Woźniak's avatar
Michał Woźniak committed
528
                <label for="chart-cases-cumulative"><span class="values-cumulative">cumulative</span><span class="values-count">count</span><span class="values-values">values</span></label>
529
                <label for="chart-cases-delta"><span class="delta-new">new</span><span class="delta-change">change</span></label>
Michał Woźniak's avatar
Michał Woźniak committed
530
            </div>
531
532
533
534
535
            <div class="chart-config-group chart-average">
                <p>Average over:</p>
                <input type="number" min="1" max="15" step="2" value="1" name="chart-average" id="chart-average"/>
                <p>datapoints</p>
            </div>
Michał Woźniak's avatar
Michał Woźniak committed
536
537
538
            <div class="chart-config-group">
                <p>Values:</p>
                <label for="chart-values-absolute">absolute</label>
Michał Woźniak's avatar
Michał Woźniak committed
539
                <label for="chart-values-permillion">per 1M</label>
Michał Woźniak's avatar
Michał Woźniak committed
540
            </div>
541
            <div class="break"></div>
Michał Woźniak's avatar
Michał Woźniak committed
542
            <div class="chart-config-group">
543
                <p>Start</p>
544
                <label for="chart-start-date">on: <input type="date" name="chart-start-from" id="chart-start-from" value="2020-01-22" min="2020-01-22"/></label>
545
                <p>or from:</p>
Michał Woźniak's avatar
Michał Woźniak committed
546
547
548
549
                <label for="chart-start-first">1st</label>
                <label for="chart-start-tenth">10th</label>
                <label for="chart-start-hundredth">100th</label>
                <label for="chart-start-thousandth">1000th</label>
Michał Woźniak's avatar
Michał Woźniak committed
550
                <p><span class="data-confirmed">confirmed case</span><span class="data-recovered">recovery</span><span class="data-deaths">death</span><span class="permillion"> per 1M</span></p>
551
            </div>
552
553
554
555
            <div class="break"></div>
            <div class="chart-config-group">
                <input type="button" id="chart-reset-settings" value="Reset all settings"/>
            </div>
Michał Woźniak's avatar
charts!    
Michał Woźniak committed
556
        </div>
557
558
559
        <div id="disclaimers-container">
            <h3>Disclaimers:</h3>
            <ul>
560
561
                <li><p>This is all back-of-the-napkin math. Take with a grain (or preferably, a spoonfull) of salt. Check your own sources. Make your own analysis.</p></li>
                <li><p>There are bugs. A reasonable attempt is made to clean the data before displaying it.</p></li>
562
563
564
            </ul>
            <h3>Some great resources:</h3>
            <ul>
565
                <li><p><a href="https://covid.hi.is/english/">University of Iceland's COVID data model</a> (and its <a href="https://github.com/bgautijonsson/covid19/">sources</a>);</p></li>
566
567
                <li><p><a href="https://covid-cases.now.sh/">COVID-19 Statistics</a> with some decent models and predictions;</p></li>
                <li><p><a href="https://aatishb.com/covidtrends/">a brilliant chart</a> showing very clearly when a country starts being able to control the outbreak;</p></li>
568
                <li><p>John Hopkins University's <a href="https://www.arcgis.com/apps/opsdashboard/index.html#/bda7594740fd40299423467b48e9ecf6">COVID-19 dashboard</a>, and their <a href="https://github.com/CSSEGISandData/COVID-19">cleaned global data in CSVs</a>, updated daily (this is the base data for this site).</p></li>
569
570
            </ul>
        </div>
571
        <footer>
Michał Woźniak's avatar
Michał Woźniak committed
572
            <p>cobbled together by <a href="https://mastodon.social/@rysiek/">@rysiek</a>; <a href="https://git.rys.io/rysiek/covid/">code is here</a>; license: <a href="./LICENSE">Affero GPL</a><br/>
Michał Woźniak's avatar
charts!    
Michał Woźniak committed
573
            uses <a href="https://github.com/spencermountain/wtf_wikipedia"><code>wtf_wikipedia</code></a> and <a href="https://www.chartjs.org/">Charts.js</a> (both <a href="./LICENSE.wtf_wikipedia-charts.js.txt">MIT-licensed</a>) and the Play font (licensed under the <a href="./Play/OFL.txt">OFL</a>)<br/>
574
575
            data from <a href="https://github.com/CSSEGISandData/COVID-19">John Hopkins University</a> via <a href="https://github.com/pomber/covid19"><code>pomber/covid19</code></a></p>
            <p>there are no <a href="https://barnacles.online">barnacle trackers</a> on this page:<br/>no fonts, styles, scripts, nor images fetched from third-party servers</p>
576
        </footer>
577
578
    </body>
</html>