Skip to content

GitLab

Switch branch/tag
Find file Normal viewHistoryPermalink
index.html 22.3 KB
Newer Older
Michał Woźniak's avatar
starting to prepare the HTML site  
Michał Woźniak committed
1
2 
<html>
    <head>
Michał Woźniak's avatar
The Czech Republic, eh! also, UTF-8 charset now    
Michał Woźniak committed
3 
        <meta charset="utf-8"/>
Michał Woźniak's avatar
yet more improvements in the graph    
Michał Woźniak committed
4 
        <title>Scary COVID-19 Data</title>
Michał Woźniak's avatar
fix    
Michał Woźniak committed
5 
        <script src="./wtf_wikipedia-client.min.js"></script>
Michał Woźniak's avatar
charts!    
Michał Woźniak committed
6 
        <script src="./Chart.bundle.min.js"></script>
Michał Woźniak's avatar
fix    
Michał Woźniak committed
7 
        <script src="./covid.js"></script>
Michał Woźniak's avatar
some style added    
Michał Woźniak committed
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23 
        <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
even more style, yo    
Michał Woźniak committed
24
25
26 
                display: flex;
                flex-direction: column;
                min-height:100vh;
Michał Woźniak's avatar
some style added    
Michał Woźniak committed
27
28
29
30
31
32
33
34
35
36 
            }
            body > * {
                padding-left:5vw;
                padding-right:5vw;
            }
            body > * > * {
                text-shadow: none;
            }
            h1 {
                text-align:center;
Michał Woźniak's avatar
even more style, yo    
Michał Woźniak committed
37
38
39
40
41
42 
                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
some style added    
Michał Woźniak committed
43 
            }
Michał Woźniak's avatar
even more style, yo    
Michał Woźniak committed
44 
            h2, h3, h4, h5, h6, h7, strong {
Michał Woźniak's avatar
some style added    
Michał Woźniak committed
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64 
                font-family: "Play Bold";
            }
            a {
                color: yellow;
            }
            
            #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
various fixes    
Michał Woźniak committed
65 
                align-self: end;
Michał Woźniak's avatar
some style added    
Michał Woźniak committed
66 
            }
Michał Woźniak's avatar
still working onthe menu    
Michał Woźniak committed
67 
            #covid-stats h2 {
Michał Woźniak's avatar
some style added    
Michał Woźniak committed
68
69
70
71 
                font-size: 140%;
                font-family: "Play Regular";
                font-weight: bold;
                text-transform: uppercase;
Michał Woźniak's avatar
even more style, yo    
Michał Woźniak committed
72 
                color: #444;
Michał Woźniak's avatar
site select styled now    
Michał Woźniak committed
73 
                opacity: 0.4;
Michał Woźniak's avatar
more work on the menu; bunch of UI fixes    
Michał Woźniak committed
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 
                margin:0px;
            }
            #covid-stats .item-container {
                display: flex;
                justify-content: center;
                align-items: center;
            }
            #covid-stats #main-menu-control {
                font-size: 200%;
                height: 1em;
                padding: 0em 0.3em 0.2em 0.3em;
                line-height: 100%;
                background:springgreen;
                transition: box-shadow 0.5s, color 0.5s, background-color 0.5s;
/*                 border: dotted 1px #444; */
            }
            #covid-stats #main-menu-control:hover {
                box-shadow: 0px 0px 2px #444;
/*                 border: solid 1px #444; */
            }
            input[type=checkbox][name=menu-shown]:checked ~ #main-menu-container {
                max-height:30em;
            }
            input[type=checkbox][name=menu-shown]:checked ~ #covid-stats #main-menu-control {
                background:#444;
                color:springgreen;
                box-shadow: inset 0px 0px 2px springgreen
Michał Woźniak's avatar
even more style, yo    
Michał Woźniak committed
101
102 
            }
            .sources {
Michał Woźniak's avatar
some style added    
Michał Woźniak committed
103
104
105
106
107
108 
                font-size: 80%;
                font-style: italic;
                margin-top: 0.4em;
                text-align: right;
                opacity: 0.5;
            }
Michał Woźniak's avatar
we now can display multiple sites    
Michał Woźniak committed
109 
            .site-data {
Michał Woźniak's avatar
some style added    
Michał Woźniak committed
110 
                display: grid;
Michał Woźniak's avatar
style fixes    
Michał Woźniak committed
111 
                grid-template-columns: auto auto auto;
Michał Woźniak's avatar
even more style, yo    
Michał Woźniak committed
112
113 
                grid-template-rows: auto auto auto;
                grid-template-areas:
Michał Woźniak's avatar
style fixes    
Michał Woźniak committed
114
115
116 
                    "auto auto auto"
                    "auto auto auto"
                    "sources sources sources";
Michał Woźniak's avatar
moar style    
Michał Woźniak committed
117
118
119 
                grid-auto-flow: row;
                padding-top:1em;
                padding-bottom:1em;
Michał Woźniak's avatar
some style added    
Michał Woźniak committed
120 
            }
Michał Woźniak's avatar
we now can display multiple sites    
Michał Woźniak committed
121 
            .site-data > * {
Michał Woźniak's avatar
some style added    
Michał Woźniak committed
122 
                display: grid;
Michał Woźniak's avatar
even more style, yo    
Michał Woźniak committed
123
124
125 
                margin:0px;
                padding:0.5em;
            }
Michał Woźniak's avatar
we now can display multiple sites    
Michał Woźniak committed
126 
            .site-data > h2 {
Michał Woźniak's avatar
even more style, yo    
Michał Woźniak committed
127
128 
                grid-area: header;
            }
Michał Woźniak's avatar
we now can display multiple sites    
Michał Woźniak committed
129 
            .site-data > .sources {
Michał Woźniak's avatar
even more style, yo    
Michał Woźniak committed
130 
                grid-area: sources;
Michał Woźniak's avatar
some style added    
Michał Woźniak committed
131 
            }
Michał Woźniak's avatar
we now can display multiple sites    
Michał Woźniak committed
132 
            .site-data > * .value {
Michał Woźniak's avatar
some style added    
Michał Woźniak committed
133
134
135 
                font-weight: bold;
                font-family: "Play Bold";
            }
Michał Woźniak's avatar
we now can display multiple sites    
Michał Woźniak committed
136 
            #sites-data-container {
Michał Woźniak's avatar
style fixes    
Michał Woźniak committed
137 
                flex-grow:1;
Michał Woźniak's avatar
we now can display multiple sites    
Michał Woźniak committed
138
139 
                display: flex;
                flex-direction: row;
Michał Woźniak's avatar
a number of small UI fixes; work on the sites menu    
Michał Woźniak committed
140 
                align-items:stretch;
Michał Woźniak's avatar
we now can display multiple sites    
Michał Woźniak committed
141
142 
                justify-content: center;
                flex-wrap: wrap;
Michał Woźniak's avatar
more work on the menu; bunch of UI fixes    
Michał Woźniak committed
143 
                min-height:8em;
Michał Woźniak's avatar
we now can display multiple sites    
Michał Woźniak committed
144
145 
            }
            #sites-data-container .site-data-container {
Michał Woźniak's avatar
style fixes    
Michał Woźniak committed
146 
                display: flex;
Michał Woźniak's avatar
site select styled now    
Michał Woźniak committed
147 
                flex-direction: column;
Michał Woźniak's avatar
style fixes for multiple site display    
Michał Woźniak committed
148
149 
                align-items:center;
                width:23em;
Michał Woźniak's avatar
style fixes    
Michał Woźniak committed
150 
            }
Michał Woźniak's avatar
even more style, yo    
Michał Woźniak committed
151
152
153
154
155
156
157
158 
            footer {
                font-size: 70%;
                text-align:center;
                opacity:0.8;
                line-height:150%;
                font-family: Monospace;
                background: black;
            }
Michał Woźniak's avatar
we now can display multiple sites    
Michał Woźniak committed
159 
            .site-data-container .sites-select {
Michał Woźniak's avatar
site select styled now    
Michał Woźniak committed
160
161
162
163
164
165
166
167
168
169 
                display: inline;
                -moz-appearance: none;
                -webkit-appearance: none;
                appearance: none;
                border:dotted 1px springgreen;
                padding:0.25em;
                background:none;
                color:springgreen;
                font-family: inherit;
                font-size:inherit;
Michał Woźniak's avatar
infection sites now gotten from Wikipedia too    
Michał Woźniak committed
170 
                min-width:15em;
Michał Woźniak's avatar
more work on the menu; bunch of UI fixes    
Michał Woźniak committed
171 
                transition: box-shadow 0.5s;
Michał Woźniak's avatar
site select styled now    
Michał Woźniak committed
172 
            }
Michał Woźniak's avatar
a number of small UI fixes; work on the sites menu    
Michał Woźniak committed
173
174
175 
            .site-data-container .sites-select:hover {
                box-shadow: 0px 0px 5px springgreen;
            }
Michał Woźniak's avatar
we now can display multiple sites    
Michał Woźniak committed
176 
            .site-data-container .sites-select option {
Michał Woźniak's avatar
the select options font size fixed    
Michał Woźniak committed
177
178 
                font-size:70%;
            }
Michał Woźniak's avatar
we now can display multiple sites    
Michał Woźniak committed
179 
            .site-data-container h2 {
Michał Woźniak's avatar
still working onthe menu    
Michał Woźniak committed
180
181
182
183
184 
                font-family: "Play Regular";
                font-weight: normal;
                margin-top:0.35em;
            }
            .site-data-container h2.for-select {
Michał Woźniak's avatar
site select styled now    
Michał Woźniak committed
185 
                position:relative;
Michał Woźniak's avatar
still working onthe menu    
Michał Woźniak committed
186
187 
                font-size:140%;
                margin-top:0.85em;
Michał Woźniak's avatar
site select styled now    
Michał Woźniak committed
188 
            }
Michał Woźniak's avatar
still working onthe menu    
Michał Woźniak committed
189 
            .site-data-container h2.for-select::after {
Michał Woźniak's avatar
site select styled now    
Michał Woźniak committed
190
191
192
193
194
195 
                position:absolute;
                right:0.5em;
                top:0.25em;
                content: "▾";
                display: block;
                color: springgreen;
Michał Woźniak's avatar
a number of small UI fixes; work on the sites menu    
Michał Woźniak committed
196
197
198
199 
                z-index: -10; /* needed to not obscure the select box from clicks */
            }
            input#menu-shown {
                display:none;
Michał Woźniak's avatar
site select styled now    
Michał Woźniak committed
200 
            }
Michał Woźniak's avatar
cleanups; clear-all-sites button moved out of the menu    
Michał Woźniak committed
201 
            .sites-menu-container {
Michał Woźniak's avatar
still working onthe menu    
Michał Woźniak committed
202
203
204 
                width:1px;
                height:0px;
            }
Michał Woźniak's avatar
cleanups; clear-all-sites button moved out of the menu    
Michał Woźniak committed
205
206
207 
            .sites-menu-container > input {
                display:none;
            }
Michał Woźniak's avatar
a number of small UI fixes; work on the sites menu    
Michał Woźniak committed
208 
            .sites-menu-container > a {
Michał Woźniak's avatar
we now can display multiple sites    
Michał Woźniak committed
209
210
211
212 
                font-size: 250%;
                text-decoration: none;
                border: dotted 1px springgreen;
                width: 1em;
Michał Woźniak's avatar
style fixes for multiple site display    
Michał Woźniak committed
213 
                height: 0.97em;
Michał Woźniak's avatar
we now can display multiple sites    
Michał Woźniak committed
214
215
216
217
218 
                line-height: 90%;
                outline:none;
                text-align: Center;
                margin-top: 0.47em;
                color: springgreen;
Michał Woźniak's avatar
interface for removing sites added (not functional yet)    
Michał Woźniak committed
219 
                display: none;
Michał Woźniak's avatar
a number of small UI fixes; work on the sites menu    
Michał Woźniak committed
220 
                cursor: pointer;
Michał Woźniak's avatar
more work on the menu; bunch of UI fixes    
Michał Woźniak committed
221 
                transition: box-shadow 0.5s;
Michał Woźniak's avatar
a number of small UI fixes; work on the sites menu    
Michał Woźniak committed
222
223
224 
            }
            .sites-menu-container > a:hover {
                box-shadow: 0px 0px 5px springgreen;
Michał Woźniak's avatar
various fixes    
Michał Woźniak committed
225
226
227 
            }
            #add-site.visible {
                display: inline-block;
Michał Woźniak's avatar
we now can display multiple sites    
Michał Woźniak committed
228 
            }
Michał Woźniak's avatar
more work on the menu; bunch of UI fixes    
Michał Woźniak committed
229 
            .site-data-container:nth-of-type(7) + .sites-menu-container > #add-site {
Michał Woźniak's avatar
six sites max please    
Michał Woźniak committed
230
231 
                display:none;
            }
Michał Woźniak's avatar
more work on the menu; bunch of UI fixes    
Michał Woźniak committed
232 
            .site-data-container:nth-of-type(3) ~ .sites-menu-container > #remove-site {
Michał Woźniak's avatar
interface for removing sites added (not functional yet)    
Michał Woźniak committed
233
234 
                display:inline-block;
            }
Michał Woźniak's avatar
cleanups; clear-all-sites button moved out of the menu    
Michał Woźniak committed
235 
            .sites-menu-container.left > a {
Michał Woźniak's avatar
working on the menu    
Michał Woźniak committed
236
237 
                display: inline-block;
                margin-left: -1em;
Michał Woźniak's avatar
cleanups; clear-all-sites button moved out of the menu    
Michał Woźniak committed
238 
            }
Michał Woźniak's avatar
graph resize fix    
Michał Woźniak committed
239 
            #the-chart-container {
Michał Woźniak's avatar
legend + title take more space now, so we need to add more height for the chart    
Michał Woźniak committed
240
241 
                height:80vh;
                min-height:600px;
Michał Woźniak's avatar
some styling changes    
Michał Woźniak committed
242
243
244 
                background: #333;
                padding-top: 1em;
                padding-bottom: 1em;
Michał Woźniak's avatar
graph resize fix    
Michał Woźniak committed
245 
            }
Michał Woźniak's avatar
charts!    
Michał Woźniak committed
246 
            #the-chart {
Michał Woźniak's avatar
graph resize fix    
Michał Woźniak committed
247 
                display:block;
Michał Woźniak's avatar
charts!    
Michał Woźniak committed
248 
            }
Michał Woźniak's avatar
Finland fixed, fixes also Sweden (yay!); Disclaimers updated    
Michał Woźniak committed
249
250
251 
            #disclaimers-container {
                font-size:80%;
            }
Michał Woźniak's avatar
chart scale (linear/logarithmic) selection added    
Michał Woźniak committed
252
253
254
255
256 
            .chart-config-container {
                margin-top:1em;
                display:flex;
                justify-content: center;
                font-size:80%;
Michał Woźniak's avatar
working on starting the charts from 1st/10th/100th/1000th case    
Michał Woźniak committed
257 
                flex-wrap: wrap;
Michał Woźniak's avatar
chart scale (linear/logarithmic) selection added    
Michał Woźniak committed
258
259
260 
            }
            .chart-config-container input {
                display:none;
Michał Woźniak's avatar
preparing UI for chart start date selection    
Michał Woźniak committed
261
262
263
264
265
266
267
268
269
270 
            }
            .chart-config-container label input {
                display:inline-block;
                background:none;
                border:none;
                font-weight: bold;
                color:springgreen;
            }
            .chart-config-container label input[type=date] {
Michał Woźniak's avatar
chart scale (linear/logarithmic) selection added    
Michał Woźniak committed
271 
            }
Michał Woźniak's avatar
chart config reset button works    
Michał Woźniak committed
272
273 
            .chart-config-container label,
            .chart-config-container input[type=button] {
Michał Woźniak's avatar
chart scale (linear/logarithmic) selection added    
Michał Woźniak committed
274
275
276
277
278 
                padding: 0.5em;
                border-radius:0.2em;
                background:#404040;
                box-shadow: inset 0px 0px 2px #333;
            }
Michał Woźniak's avatar
chart config reset button works    
Michał Woźniak committed
279
280
281
282
283
284
285
286
287
288
289 
            .chart-config-container input[type=button] {
                display:inline-block;
                border:none;
                color:springgreen;
                font-family: "Play Bold";
                font-size: 100%;
                padding-left:1em;
                padding-right:1em;
                background:#555;
                box-shadow:0px 0px 2px #555;
                font-variant: all-small-caps;
Michał Woźniak's avatar
more work on the menu; bunch of UI fixes    
Michał Woźniak committed
290 
                transition: box-shadow 0.5s, color 0.5s, background-color 0.5s;
Michał Woźniak's avatar
chart config reset button works    
Michał Woźniak committed
291
292
293
294
295
296
297
298
299 
            }
            .chart-config-container input[type=button]:hover {
                color:black;
                background:springgreen;
                box-shadow:0px 0px 2px springgreen;
            }
            .chart-config-container input[type=button]:active {
                box-shadow:inset 0px 0px 2px #444;
            }
Michał Woźniak's avatar
preparing the interface for "start from Xth case per 1M" thing    
Michał Woźniak committed
300
301
302 
            /*
             * chart controls mechanics
             */
Michał Woźniak's avatar
getting ready for recovered/deaths charts    
Michał Woźniak committed
303
304
305 
            .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
active cases graph added    
Michał Woźniak committed
306 
            .chart-config-container input#chart-data-active:checked ~ .chart-config-group label[for=chart-data-active],
Michał Woźniak's avatar
preparing the interface for "start from Xth case per 1M" thing    
Michał Woźniak committed
307
308
309
310
311
312 
            .chart-config-container input#chart-type-logarithmic:checked ~ .chart-config-group label[for=chart-type-logarithmic],
            .chart-config-container input#chart-type-linear:checked ~ .chart-config-group label[for=chart-type-linear],
            .chart-config-container input#chart-cases-cumulative:checked ~ .chart-config-group label[for=chart-cases-cumulative],
            .chart-config-container input#chart-cases-new:checked ~ .chart-config-group label[for=chart-cases-new],
            .chart-config-container input#chart-values-absolute:checked ~ .chart-config-group label[for=chart-values-absolute],
            .chart-config-container input#chart-values-per-million:checked ~ .chart-config-group label[for=chart-values-per-million],
Michał Woźniak's avatar
preparing UI for chart start date selection    
Michał Woźniak committed
313 
            .chart-config-container input#chart-start-date:checked ~ .chart-config-group label[for=chart-start-date],
Michał Woźniak's avatar
preparing the interface for "start from Xth case per 1M" thing    
Michał Woźniak committed
314
315
316
317 
            .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] {
Michał Woźniak's avatar
chart scale (linear/logarithmic) selection added    
Michał Woźniak committed
318
319
320
321 
                background:springgreen;
                color:black;
                box-shadow: 0px 0px 2px springgreen;
            }
Michał Woźniak's avatar
preparing UI for chart start date selection    
Michał Woźniak committed
322
323
324 
            .chart-config-container input#chart-start-date:checked ~ .chart-config-group label[for=chart-start-date] > input {
                color:black;
            }
Michał Woźniak's avatar
caching the data in global vars just a bit; more verbosity in case of errors;...    
Michał Woźniak committed
325
326
327 
            .chart-config-group {
                display:flex;
                justify-content: center;
Michał Woźniak's avatar
working on starting the charts from 1st/10th/100th/1000th case    
Michał Woźniak committed
328
329
330
331
332 
                margin:0.5em 1em;
            }
            .chart-config-group > p {
                margin:0em;
                padding:0.5em;
Michał Woźniak's avatar
caching the data in global vars just a bit; more verbosity in case of errors;...    
Michał Woźniak committed
333 
            }
Michał Woźniak's avatar
we can now display recoveries and deaths for each site, too    
Michał Woźniak committed
334
335
336 
            .chart-config-group .per-million,
            .chart-config-group .data-confirmed,
            .chart-config-group .data-recovered,
Michał Woźniak's avatar
UI bugfix    
Michał Woźniak committed
337
338 
            .chart-config-group .data-deaths,
            .chart-config-group .data-active {
Michał Woźniak's avatar
preparing the interface for "start from Xth case per 1M" thing    
Michał Woźniak committed
339
340 
                display:none;
            }
Michał Woźniak's avatar
we can now display recoveries and deaths for each site, too    
Michał Woźniak committed
341
342
343 
            .chart-config-container input#chart-values-per-million:checked ~ .chart-config-group .per-million,
            .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
UI bugfix    
Michał Woźniak committed
344
345 
            .chart-config-container input#chart-data-deaths:checked ~ .chart-config-group .data-deaths,
            .chart-config-container input#chart-data-active:checked ~ .chart-config-group .data-active {
Michał Woźniak's avatar
preparing the interface for "start from Xth case per 1M" thing    
Michał Woźniak committed
346
347 
                display:inline;
            }
Michał Woźniak's avatar
implemented rolling average for new case mode    
Michał Woźniak committed
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368 
            .chart-config-group.chart-average {
                display:none;
            }
            .chart-config-container input#chart-cases-new:checked ~ .chart-config-group.chart-average {
                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;
            }
Michał Woźniak's avatar
some sanity in the chart controls layout    
Michał Woźniak committed
369
370
371
372 
            .chart-config-container .break {
                flex-basis: 100%;
                height: 0;
            }
Michał Woźniak's avatar
some style added    
Michał Woźniak committed
373 
        </style>
Michał Woźniak's avatar
starting to prepare the HTML site  
Michał Woźniak committed
374
375 
    </head>
    <body>
Michał Woźniak's avatar
started working on the interface; we now have a country selection drop-down...    
Michał Woźniak committed
376 
        <h1>Scary COVID-19 data</h1>
Michał Woźniak's avatar
more work on the menu; bunch of UI fixes    
Michał Woźniak committed
377 
        <input type="checkbox" id="menu-shown" name="menu-shown"/>
Michał Woźniak's avatar
started working on the interface; we now have a country selection drop-down...    
Michał Woźniak committed
378 
        <div id="covid-stats">
Michał Woźniak's avatar
more work on the menu; bunch of UI fixes    
Michał Woźniak committed
379
380
381
382
383
384 
            <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>
            <div id="mortality"><span class="label">Mortality rate:</span> <span class="value">(loading...)</span></div>
            <div class="item-container"><label id="main-menu-control" for="menu-shown">☰</label></div>
Michał Woźniak's avatar
started working on the interface; we now have a country selection drop-down...    
Michał Woźniak committed
385 
        </div>
Michał Woźniak's avatar
source acknowledgements, some Disclaimers removed since we are not using messy...    
Michał Woźniak committed
386 
        <div class="sources"><a href="https://github.com/CSSEGISandData/COVID-19">source</a></div>
Michał Woźniak's avatar
more work on the menu; bunch of UI fixes    
Michał Woźniak committed
387
388
389
390
391
392
393 
        <div class="main-menu-container">
            <div id="internal-main-menu-container">
                <h2>Show 6 sites with:</h2>
                <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"/>
                <input type="button" id="site-menu-button-active-drop" value="greatest drop of number of active cases"/>
Michał Woźniak's avatar
still working onthe menu    
Michał Woźniak committed
394 
            </div>
Michał Woźniak's avatar
more work on the menu; bunch of UI fixes    
Michał Woźniak committed
395
396 
        </div>
        <div id="sites-data-container">
Michał Woźniak's avatar
still working onthe menu    
Michał Woźniak committed
397 
            <div class="sites-menu-container left">
Michał Woźniak's avatar
more work on the menu; bunch of UI fixes    
Michał Woźniak committed
398 
                <a href="#clear-all" id="clear-all-sites">×</a>
Michał Woźniak's avatar
working on the menu    
Michał Woźniak committed
399 
            </div>
Michał Woźniak's avatar
we now can display multiple sites    
Michał Woźniak committed
400 
            <div class="site-data-container">
Michał Woźniak's avatar
still working onthe menu    
Michał Woźniak committed
401 
                <h2 class="for-select"><select class="sites-select" tabindex="1">
Michał Woźniak's avatar
we now can display multiple sites    
Michał Woźniak committed
402
403
404
405 
                    <option value="select one">(select an area)</option>
                </select></h2>
                <div class="site-data">
                </div>
Michał Woźniak's avatar
style fixes    
Michał Woźniak committed
406 
            </div>
Michał Woźniak's avatar
cleanups; clear-all-sites button moved out of the menu    
Michał Woźniak committed
407 
            <div  class="sites-menu-container right">
Michał Woźniak's avatar
interface for removing sites added (not functional yet)    
Michał Woźniak committed
408
409
410 
                <a href="#add-site" id="add-site">+</a>
                <a href="#remove-site" id="remove-site">-</a>
            </div>
Michał Woźniak's avatar
started working on the interface; we now have a country selection drop-down...    
Michał Woźniak committed
411 
        </div>
Michał Woźniak's avatar
charts!    
Michał Woźniak committed
412
413 
        <div id="the-chart-container">
            <canvas id="the-chart"></canvas>
Michał Woźniak's avatar
graph resize fix    
Michał Woźniak committed
414
415 
        </div>
        <div class="chart-config-container">
Michał Woźniak's avatar
we can now display recoveries and deaths for each site, too    
Michał Woźniak committed
416 
            <input type="radio" id="chart-data-confirmed" name="chart-data" value="confirmed" checked="checked"/>
Michał Woźniak's avatar
getting ready for recovered/deaths charts    
Michał Woźniak committed
417 
            <input type="radio" id="chart-data-recovered" name="chart-data" value="recovered"/>
Michał Woźniak's avatar
we can now display recoveries and deaths for each site, too    
Michał Woźniak committed
418 
            <input type="radio" id="chart-data-deaths" name="chart-data" value="deaths"/>
Michał Woźniak's avatar
active cases graph added    
Michał Woźniak committed
419 
            <input type="radio" id="chart-data-active" name="chart-data" value="active"/>
Michał Woźniak's avatar
preparing the interface for "start from Xth case per 1M" thing    
Michał Woźniak committed
420
421
422
423
424
425 
            <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"/>
            <input type="radio" id="chart-cases-cumulative" name="chart-cases" value="cumulative" checked="checked"/>
            <input type="radio" id="chart-cases-new" name="chart-cases" value="new"/>
            <input type="radio" id="chart-values-absolute" name="chart-values" value="absolute" checked="checked"/>
            <input type="radio" id="chart-values-per-million" name="chart-values" value="per-million"/>
Michał Woźniak's avatar
preparing UI for chart start date selection    
Michał Woźniak committed
426 
            <input type="radio" id="chart-start-date" name="chart-start" value="date"/>
Michał Woźniak's avatar
preparing the interface for "start from Xth case per 1M" thing    
Michał Woźniak committed
427
428
429
430 
            <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"/>
Michał Woźniak's avatar
we can now display recoveries and deaths for each site, too    
Michał Woźniak committed
431 
            <div class="chart-config-group">
Michał Woźniak's avatar
getting ready for recovered/deaths charts    
Michał Woźniak committed
432
433
434
435 
                <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
active cases graph added    
Michał Woźniak committed
436 
                <label for="chart-data-active">active cases</label>
Michał Woźniak's avatar
we can now display recoveries and deaths for each site, too    
Michał Woźniak committed
437 
            </div>
Michał Woźniak's avatar
graph resize fix    
Michał Woźniak committed
438
439
440
441
442 
            <div class="chart-config-group">
                <p>Scale:</p>
                <label for="chart-type-logarithmic">logarithmic</label>
                <label for="chart-type-linear">linear</label>
            </div>
Michał Woźniak's avatar
some sanity in the chart controls layout    
Michał Woźniak committed
443 
            <div class="break"></div>
Michał Woźniak's avatar
graph resize fix    
Michał Woźniak committed
444
445
446
447
448 
            <div class="chart-config-group">
                <p>Cases:</p>
                <label for="chart-cases-cumulative">cumulative</label>
                <label for="chart-cases-new">new</label>
            </div>
Michał Woźniak's avatar
implemented rolling average for new case mode    
Michał Woźniak committed
449
450
451
452
453 
            <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
added per-million display    
Michał Woźniak committed
454
455
456
457
458 
            <div class="chart-config-group">
                <p>Values:</p>
                <label for="chart-values-absolute">absolute</label>
                <label for="chart-values-per-million">per 1M</label>
            </div>
Michał Woźniak's avatar
some sanity in the chart controls layout    
Michał Woźniak committed
459 
            <div class="break"></div>
Michał Woźniak's avatar
graph resize fix    
Michał Woźniak committed
460 
            <div class="chart-config-group">
Michał Woźniak's avatar
preparing UI for chart start date selection    
Michał Woźniak committed
461 
                <p>Start</p>
Michał Woźniak's avatar
more UI work on the menu; reset buttons work    
Michał Woźniak committed
462 
                <label for="chart-start-date">on: <input type="date" name="chart-start-date" value="2020-01-22" min="2020-01-22"/></label>
Michał Woźniak's avatar
working on the date select interface    
Michał Woźniak committed
463 
                <p>or from:</p>
Michał Woźniak's avatar
graph resize fix    
Michał Woźniak committed
464
465
466
467 
                <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
UI bugfix    
Michał Woźniak committed
468 
                <p><span class="data-confirmed">case</span><span class="data-recovered">recovery</span><span class="data-deaths">death</span><span class="data-active">active case</span><span class="per-million"> per 1M</span></p>
Michał Woźniak's avatar
chart scale (linear/logarithmic) selection added    
Michał Woźniak committed
469 
            </div>
Michał Woźniak's avatar
chart config reset button works    
Michał Woźniak committed
470
471
472
473 
            <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
474 
        </div>
Michał Woźniak's avatar
Finland fixed, fixes also Sweden (yay!); Disclaimers updated    
Michał Woźniak committed
475
476
477 
        <div id="disclaimers-container">
            <h3>Disclaimers:</h3>
            <ul>
Michał Woźniak's avatar
source acknowledgements, some Disclaimers removed since we are not using messy...    
Michał Woźniak committed
478
479 
                <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>
Michał Woźniak's avatar
resources are now a separate list from discplaiers    
Michał Woźniak committed
480
481
482 
            </ul>
            <h3>Some great resources:</h3>
            <ul>
Michał Woźniak's avatar
IS model is in EN now! wooo!    
Michał Woźniak committed
483 
                <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>
Michał Woźniak's avatar
resources are now a separate list from discplaiers    
Michał Woźniak committed
484
485 
                <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>
Michał Woźniak's avatar
It's John Hopkins, not John Hopkin's    
Michał Woźniak committed
486 
                <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>
Michał Woźniak's avatar
Finland fixed, fixes also Sweden (yay!); Disclaimers updated    
Michał Woźniak committed
487
488 
            </ul>
        </div>
Michał Woźniak's avatar
started working on the interface; we now have a country selection drop-down...    
Michał Woźniak committed
489 
        <footer>
Michał Woźniak's avatar
even more style, yo    
Michał Woźniak committed
490 
            <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
491 
            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/>
Michał Woźniak's avatar
remove the footer disclaimer about privacy; that is fixed already    
Michał Woźniak committed
492
493 
            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>
Michał Woźniak's avatar
started working on the interface; we now have a country selection drop-down...    
Michał Woźniak committed
494 
        </footer>
Michał Woźniak's avatar
starting to prepare the HTML site  
Michał Woźniak committed
495
496 
    </body>
</html>