Skip to content
GitLab
Switch branch/tag
Find file Normal viewHistoryPermalink
index.html 22.8 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
even more style, yo    
Michał Woźniak committed
67 
            #covid-stats h2,
Michał Woźniak's avatar
we now can display multiple sites    
Michał Woźniak committed
68 
            .site-data-container h2 {
Michał Woźniak's avatar
some style added    
Michał Woźniak committed
69
70
71
72
73 
                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
74
75 
            #covid-stats h2 {
                color: #444;
Michał Woźniak's avatar
site select styled now    
Michał Woźniak committed
76 
                opacity: 0.4;
Michał Woźniak's avatar
even more style, yo    
Michał Woźniak committed
77
78 
            }
            .sources {
Michał Woźniak's avatar
some style added    
Michał Woźniak committed
79
80
81
82
83
84 
                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
85 
            .site-data {
Michał Woźniak's avatar
some style added    
Michał Woźniak committed
86 
                display: grid;
Michał Woźniak's avatar
style fixes    
Michał Woźniak committed
87 
                grid-template-columns: auto auto auto;
Michał Woźniak's avatar
even more style, yo    
Michał Woźniak committed
88
89 
                grid-template-rows: auto auto auto;
                grid-template-areas:
Michał Woźniak's avatar
style fixes    
Michał Woźniak committed
90
91
92 
                    "auto auto auto"
                    "auto auto auto"
                    "sources sources sources";
Michał Woźniak's avatar
moar style    
Michał Woźniak committed
93
94
95 
                grid-auto-flow: row;
                padding-top:1em;
                padding-bottom:1em;
Michał Woźniak's avatar
some style added    
Michał Woźniak committed
96 
            }
Michał Woźniak's avatar
we now can display multiple sites    
Michał Woźniak committed
97 
            .site-data > * {
Michał Woźniak's avatar
some style added    
Michał Woźniak committed
98 
                display: grid;
Michał Woźniak's avatar
even more style, yo    
Michał Woźniak committed
99
100
101 
                margin:0px;
                padding:0.5em;
            }
Michał Woźniak's avatar
we now can display multiple sites    
Michał Woźniak committed
102 
            .site-data > h2 {
Michał Woźniak's avatar
even more style, yo    
Michał Woźniak committed
103
104 
                grid-area: header;
            }
Michał Woźniak's avatar
we now can display multiple sites    
Michał Woźniak committed
105 
            .site-data > .sources {
Michał Woźniak's avatar
even more style, yo    
Michał Woźniak committed
106 
                grid-area: sources;
Michał Woźniak's avatar
some style added    
Michał Woźniak committed
107 
            }
Michał Woźniak's avatar
we now can display multiple sites    
Michał Woźniak committed
108 
            .site-data > * .value {
Michał Woźniak's avatar
some style added    
Michał Woźniak committed
109
110
111 
                font-weight: bold;
                font-family: "Play Bold";
            }
Michał Woźniak's avatar
we now can display multiple sites    
Michał Woźniak committed
112 
            #sites-data-container {
Michał Woźniak's avatar
style fixes    
Michał Woźniak committed
113 
                flex-grow:1;
Michał Woźniak's avatar
we now can display multiple sites    
Michał Woźniak committed
114
115
116
117
118
119
120 
                display: flex;
                flex-direction: row;
                align-items:flex-start;
                justify-content: center;
                flex-wrap: wrap;
            }
            #sites-data-container .site-data-container {
Michał Woźniak's avatar
style fixes    
Michał Woźniak committed
121 
                display: flex;
Michał Woźniak's avatar
site select styled now    
Michał Woźniak committed
122 
                flex-direction: column;
Michał Woźniak's avatar
style fixes for multiple site display    
Michał Woźniak committed
123
124 
                align-items:center;
                width:23em;
Michał Woźniak's avatar
style fixes    
Michał Woźniak committed
125 
            }
Michał Woźniak's avatar
even more style, yo    
Michał Woźniak committed
126
127
128
129
130
131
132
133 
            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
134 
            .site-data-container .sites-select {
Michał Woźniak's avatar
site select styled now    
Michał Woźniak committed
135
136
137
138
139
140
141
142
143
144 
                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
145 
                min-width:15em;
Michał Woźniak's avatar
site select styled now    
Michał Woźniak committed
146 
            }
Michał Woźniak's avatar
we now can display multiple sites    
Michał Woźniak committed
147 
            .site-data-container .sites-select option {
Michał Woźniak's avatar
the select options font size fixed    
Michał Woźniak committed
148
149 
                font-size:70%;
            }
Michał Woźniak's avatar
we now can display multiple sites    
Michał Woźniak committed
150 
            .site-data-container h2 {
Michał Woźniak's avatar
site select styled now    
Michał Woźniak committed
151
152 
                position:relative;
            }
Michał Woźniak's avatar
we now can display multiple sites    
Michał Woźniak committed
153 
            .site-data-container h2::after {
Michał Woźniak's avatar
site select styled now    
Michał Woźniak committed
154
155
156
157
158
159
160 
                position:absolute;
                right:0.5em;
                top:0.25em;
                content: "▾";
                display: block;
                color: springgreen;
            }
Michał Woźniak's avatar
cleanups; clear-all-sites button moved out of the menu    
Michał Woźniak committed
161
162 
            
            .sites-menu-container {
Michał Woźniak's avatar
style fixes for multiple site display    
Michał Woźniak committed
163 
                width:0px;
Michał Woźniak's avatar
we now can display multiple sites    
Michał Woźniak committed
164 
            }
Michał Woźniak's avatar
cleanups; clear-all-sites button moved out of the menu    
Michał Woźniak committed
165
166
167
168
169
170 
            .sites-menu-container > input {
                display:none;
            }
            .sites-menu-container > label,
            .sites-menu-container > a,
            .sites-menu-container .sites-menu {
Michał Woźniak's avatar
we now can display multiple sites    
Michał Woźniak committed
171
172
173
174 
                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
175 
                height: 0.97em;
Michał Woźniak's avatar
we now can display multiple sites    
Michał Woźniak committed
176
177
178
179
180 
                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
181 
                display: none;
Michał Woźniak's avatar
various fixes    
Michał Woźniak committed
182
183
184 
            }
            #add-site.visible {
                display: inline-block;
Michał Woźniak's avatar
we now can display multiple sites    
Michał Woźniak committed
185 
            }
Michał Woźniak's avatar
cleanups; clear-all-sites button moved out of the menu    
Michał Woźniak committed
186 
            .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
187
188 
                display:none;
            }
Michał Woźniak's avatar
cleanups; clear-all-sites button moved out of the menu    
Michał Woźniak committed
189 
            .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
190
191 
                display:inline-block;
            }
Michał Woźniak's avatar
cleanups; clear-all-sites button moved out of the menu    
Michał Woźniak committed
192
193 
            .sites-menu-container.left > label,
            .sites-menu-container.left > a {
Michał Woźniak's avatar
working on the menu    
Michał Woźniak committed
194
195 
                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
196
197 
            }
            .sites-menu-container.left > label {
Michał Woźniak's avatar
working on the menu    
Michał Woźniak committed
198
199 
                line-height: 78%;
            }
Michał Woźniak's avatar
interface work around the menu is done; time to implement stuff    
Michał Woźniak committed
200
201
202
203
204 
            #site-menu-control-container input[type=checkbox][name=menu-shown]:checked ~ #site-menu-control {
                background:springgreen;
                color:black;
            }
Michał Woźniak's avatar
cleanups; clear-all-sites button moved out of the menu    
Michał Woźniak committed
205 
            #site-menu-control-container .sites-menu {
Michał Woźniak's avatar
interface work around the menu is done; time to implement stuff    
Michał Woźniak committed
206
207
208
209
210
211
212 
                display:none;
                min-width: 18.95em;
                height: 13em;
                background:black;
                position: relative;
                z-index: 10;
                left: 1em;
Michał Woźniak's avatar
cleanups; clear-all-sites button moved out of the menu    
Michał Woźniak committed
213 
                top: -6.7em;
Michał Woźniak's avatar
interface work around the menu is done; time to implement stuff    
Michał Woźniak committed
214 
                font-size: 100%;
Michał Woźniak's avatar
cleanups; clear-all-sites button moved out of the menu    
Michał Woźniak committed
215 
                margin-bottom: -15.55em;
Michał Woźniak's avatar
interface work around the menu is done; time to implement stuff    
Michał Woźniak committed
216
217 
                padding:1em;
                color:springgreen;
Michał Woźniak's avatar
more UI work on the menu; reset buttons work    
Michał Woźniak committed
218
219 
                flex-direction:row;
                flex-wrap: wrap;
Michał Woźniak's avatar
cleanups; clear-all-sites button moved out of the menu    
Michał Woźniak committed
220
221 
                border: dotted 1px springgreen;
                line-height: 90%;
Michał Woźniak's avatar
interface work around the menu is done; time to implement stuff    
Michał Woźniak committed
222 
            }
Michał Woźniak's avatar
cleanups; clear-all-sites button moved out of the menu    
Michał Woźniak committed
223 
            #site-menu-control-container .sites-menu * {
Michał Woźniak's avatar
more UI work on the menu; reset buttons work    
Michał Woźniak committed
224
225
226 
                width:100%;
                margin:0.2em;
            }
Michał Woźniak's avatar
cleanups; clear-all-sites button moved out of the menu    
Michał Woźniak committed
227 
            #site-menu-control-container .sites-menu .small {
Michał Woźniak's avatar
more UI work on the menu; reset buttons work    
Michał Woźniak committed
228
229
230 
                width: 45%;
                flex-grow: 1;
                flex-shrink: 1;
Michał Woźniak's avatar
interface work around the menu is done; time to implement stuff    
Michał Woźniak committed
231 
            }
Michał Woźniak's avatar
cleanups; clear-all-sites button moved out of the menu    
Michał Woźniak committed
232 
            #site-menu-control-container .sites-menu p {
Michał Woźniak's avatar
interface work around the menu is done; time to implement stuff    
Michał Woźniak committed
233
234
235 
                text-align:left;
                font-size:90%;
            }
Michał Woźniak's avatar
cleanups; clear-all-sites button moved out of the menu    
Michał Woźniak committed
236 
            #site-menu-control-container .sites-menu p:not(:first-child) {
Michał Woźniak's avatar
more UI work on the menu; reset buttons work    
Michał Woźniak committed
237 
                margin-top:1em;
Michał Woźniak's avatar
interface work around the menu is done; time to implement stuff    
Michał Woźniak committed
238 
            }
Michał Woźniak's avatar
cleanups; clear-all-sites button moved out of the menu    
Michał Woźniak committed
239 
            #site-menu-control-container input[type=checkbox][name=menu-shown]:checked ~ .sites-menu {
Michał Woźniak's avatar
interface work around the menu is done; time to implement stuff    
Michał Woźniak committed
240
241 
                display: flex;
            }
Michał Woźniak's avatar
cleanups; clear-all-sites button moved out of the menu    
Michał Woźniak committed
242 
            .sites-menu input {
Michał Woźniak's avatar
interface work around the menu is done; time to implement stuff    
Michał Woźniak committed
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257 
                padding: 0.5em;
                border-radius: 0.2em;
                background: #444;
                box-shadow: 0px 0px 2px #555;
                border: none;
                color: springgreen;
                -moz-appearance: none;
                -webkit-appearance: none;
                appearance: none;
                font-family: "Play Regular";
                font-size: 80%;
                text-align: center;
                font-variant: all-small-caps;
                transition:background-color 0.5s, color 0.5s;
            }
Michał Woźniak's avatar
cleanups; clear-all-sites button moved out of the menu    
Michał Woźniak committed
258 
            .sites-menu input:hover {
Michał Woźniak's avatar
interface work around the menu is done; time to implement stuff    
Michał Woźniak committed
259
260
261
262
263 
                background: springgreen;
                color: black;
                box-shadow: 0px 0px 2px springgreen;
            }
Michał Woźniak's avatar
graph resize fix    
Michał Woźniak committed
264 
            #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
265
266 
                height:80vh;
                min-height:600px;
Michał Woźniak's avatar
some styling changes    
Michał Woźniak committed
267
268
269 
                background: #333;
                padding-top: 1em;
                padding-bottom: 1em;
Michał Woźniak's avatar
graph resize fix    
Michał Woźniak committed
270 
            }
Michał Woźniak's avatar
charts!    
Michał Woźniak committed
271 
            #the-chart {
Michał Woźniak's avatar
graph resize fix    
Michał Woźniak committed
272 
                display:block;
Michał Woźniak's avatar
charts!    
Michał Woźniak committed
273 
            }
Michał Woźniak's avatar
Finland fixed, fixes also Sweden (yay!); Disclaimers updated    
Michał Woźniak committed
274
275
276 
            #disclaimers-container {
                font-size:80%;
            }
Michał Woźniak's avatar
chart scale (linear/logarithmic) selection added    
Michał Woźniak committed
277
278
279
280
281 
            .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
282 
                flex-wrap: wrap;
Michał Woźniak's avatar
chart scale (linear/logarithmic) selection added    
Michał Woźniak committed
283
284
285 
            }
            .chart-config-container input {
                display:none;
Michał Woźniak's avatar
preparing UI for chart start date selection    
Michał Woźniak committed
286
287
288
289
290
291
292
293
294
295 
            }
            .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
296 
            }
Michał Woźniak's avatar
chart config reset button works    
Michał Woźniak committed
297
298 
            .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
299
300
301
302
303 
                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
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324 
            .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;
                transition: color 0.5s, background-color 0.5s;
            }
            .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
325
326
327 
            /*
             * chart controls mechanics
             */
Michał Woźniak's avatar
getting ready for recovered/deaths charts    
Michał Woźniak committed
328
329
330 
            .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
331 
            .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
332
333
334
335
336
337 
            .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
338 
            .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
339
340
341
342 
            .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
343
344
345
346 
                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
347
348
349 
            .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
350
351
352 
            .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
353
354
355
356
357 
                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
358 
            }
Michał Woźniak's avatar
we can now display recoveries and deaths for each site, too    
Michał Woźniak committed
359
360
361 
            .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
362
363 
            .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
364
365 
                display:none;
            }
Michał Woźniak's avatar
we can now display recoveries and deaths for each site, too    
Michał Woźniak committed
366
367
368 
            .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
369
370 
            .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
371
372 
                display:inline;
            }
Michał Woźniak's avatar
implemented rolling average for new case mode    
Michał Woźniak committed
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393 
            .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
394
395
396
397 
            .chart-config-container .break {
                flex-basis: 100%;
                height: 0;
            }
Michał Woźniak's avatar
some style added    
Michał Woźniak committed
398 
        </style>
Michał Woźniak's avatar
starting to prepare the HTML site  
Michał Woźniak committed
399
400 
    </head>
    <body>
Michał Woźniak's avatar
started working on the interface; we now have a country selection drop-down...    
Michał Woźniak committed
401
402
403
404
405
406
407
408 
        <h1>Scary COVID-19 data</h1>
        <div id="covid-stats">
            <h2>Global stats</h2>
            <div id="confirmed"><span class="label">Confirmed cases:</span> <span class="value"></span></div>
            <div id="deaths"><span class="label">Deaths:</span> <span class="value"></span></div>
            <div id="recovered"><span class="label">Recovered:</span> <span class="value"></span></div>
            <div id="mortality"><span class="label">Mortality rate:</span> <span class="value"></span></div>
        </div>
Michał Woźniak's avatar
source acknowledgements, some Disclaimers removed since we are not using messy...    
Michał Woźniak committed
409 
        <div class="sources"><a href="https://github.com/CSSEGISandData/COVID-19">source</a></div>
Michał Woźniak's avatar
we now can display multiple sites    
Michał Woźniak committed
410 
        <div id="sites-data-container">
Michał Woźniak's avatar
cleanups; clear-all-sites button moved out of the menu    
Michał Woźniak committed
411 
            <div class="sites-menu-container left" id="site-menu-control-container">
Michał Woźniak's avatar
interface work around the menu is done; time to implement stuff    
Michał Woźniak committed
412
413 
                <input type="checkbox" id="menu-shown" name="menu-shown"/>
                <label id="site-menu-control" for="menu-shown">☰</label>
Michał Woźniak's avatar
cleanups; clear-all-sites button moved out of the menu    
Michał Woźniak committed
414
415 
                <a href="#clear-all" id="clear-all-sites">↻</a>
                <div class="sites-menu">
Michał Woźniak's avatar
interface work around the menu is done; time to implement stuff    
Michał Woźniak committed
416 
                    <p>Show 6 sites with:</p>
Michał Woźniak's avatar
bugfix for handling hash changes; work on menu buttons    
Michał Woźniak committed
417
418
419
420 
                    <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
interface work around the menu is done; time to implement stuff    
Michał Woźniak committed
421 
                </div>
Michał Woźniak's avatar
working on the menu    
Michał Woźniak committed
422 
            </div>
Michał Woźniak's avatar
we now can display multiple sites    
Michał Woźniak committed
423
424
425
426
427
428 
            <div class="site-data-container">
                <h2><select class="sites-select" tabindex="1">
                    <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
429 
            </div>
Michał Woźniak's avatar
cleanups; clear-all-sites button moved out of the menu    
Michał Woźniak committed
430 
            <div  class="sites-menu-container right">
Michał Woźniak's avatar
interface for removing sites added (not functional yet)    
Michał Woźniak committed
431
432
433 
                <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
434 
        </div>
Michał Woźniak's avatar
charts!    
Michał Woźniak committed
435
436 
        <div id="the-chart-container">
            <canvas id="the-chart"></canvas>
Michał Woźniak's avatar
graph resize fix    
Michał Woźniak committed
437
438 
        </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
439 
            <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
440 
            <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
441 
            <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
442 
            <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
443
444
445
446
447
448 
            <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
449 
            <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
450
451
452
453 
            <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
454 
            <div class="chart-config-group">
Michał Woźniak's avatar
getting ready for recovered/deaths charts    
Michał Woźniak committed
455
456
457
458 
                <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
459 
                <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
460 
            </div>
Michał Woźniak's avatar
graph resize fix    
Michał Woźniak committed
461
462
463
464
465 
            <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
466 
            <div class="break"></div>
Michał Woźniak's avatar
graph resize fix    
Michał Woźniak committed
467
468
469
470
471 
            <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
472
473
474
475
476 
            <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
477
478
479
480
481 
            <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
482 
            <div class="break"></div>
Michał Woźniak's avatar
graph resize fix    
Michał Woźniak committed
483 
            <div class="chart-config-group">
Michał Woźniak's avatar
preparing UI for chart start date selection    
Michał Woźniak committed
484 
                <p>Start</p>
Michał Woźniak's avatar
more UI work on the menu; reset buttons work    
Michał Woźniak committed
485 
                <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
486 
                <p>or from:</p>
Michał Woźniak's avatar
graph resize fix    
Michał Woźniak committed
487
488
489
490 
                <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
491 
                <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
492 
            </div>
Michał Woźniak's avatar
chart config reset button works    
Michał Woźniak committed
493
494
495
496 
            <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
497 
        </div>
Michał Woźniak's avatar
Finland fixed, fixes also Sweden (yay!); Disclaimers updated    
Michał Woźniak committed
498
499
500 
        <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
501
502 
                <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
503
504
505 
            </ul>
            <h3>Some great resources:</h3>
            <ul>
Michał Woźniak's avatar
IS model is in EN now! wooo!    
Michał Woźniak committed
506 
                <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
507
508 
                <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
509 
                <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
510
511 
            </ul>
        </div>
Michał Woźniak's avatar
started working on the interface; we now have a country selection drop-down...    
Michał Woźniak committed
512 
        <footer>
Michał Woźniak's avatar
even more style, yo    
Michał Woźniak committed
513 
            <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
514 
            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
515
516 
            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
517 
        </footer>
Michał Woźniak's avatar
starting to prepare the HTML site  
Michał Woźniak committed
518
519 
    </body>
</html>