index.html 12.1 KB
Newer Older
1
2
<html>
    <head>
3
        <meta charset="utf-8"/>
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
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
Michał Woźniak committed
24
25
26
                display: flex;
                flex-direction: column;
                min-height:100vh;
Michał Woźniak's avatar
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
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
Michał Woźniak committed
43
            }
Michał Woźniak's avatar
Michał Woźniak committed
44
            h2, h3, h4, h5, h6, h7, strong {
Michał Woźniak's avatar
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
Michał Woźniak committed
65
                align-self: end;
Michał Woźniak's avatar
Michał Woźniak committed
66
            }
Michał Woźniak's avatar
Michał Woźniak committed
67
            #covid-stats h2,
68
            .site-data-container h2 {
Michał Woźniak's avatar
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
Michał Woźniak committed
74
75
            #covid-stats h2 {
                color: #444;
Michał Woźniak's avatar
Michał Woźniak committed
76
                opacity: 0.4;
Michał Woźniak's avatar
Michał Woźniak committed
77
78
            }
            .sources {
Michał Woźniak's avatar
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;
            }
85
            .site-data {
Michał Woźniak's avatar
Michał Woźniak committed
86
                display: grid;
Michał Woźniak's avatar
Michał Woźniak committed
87
                grid-template-columns: auto auto auto;
Michał Woźniak's avatar
Michał Woźniak committed
88
89
                grid-template-rows: auto auto auto;
                grid-template-areas: 
Michał Woźniak's avatar
Michał Woźniak committed
90
91
92
                    "auto auto auto"
                    "auto auto auto"
                    "sources sources sources";
Michał Woźniak's avatar
Michał Woźniak committed
93
94
95
                grid-auto-flow: row;
                padding-top:1em;
                padding-bottom:1em;
Michał Woźniak's avatar
Michał Woźniak committed
96
            }
97
            .site-data > * {
Michał Woźniak's avatar
Michał Woźniak committed
98
                display: grid;
Michał Woźniak's avatar
Michał Woźniak committed
99
100
101
                margin:0px;
                padding:0.5em;
            }
102
            .site-data > h2 {
Michał Woźniak's avatar
Michał Woźniak committed
103
104
                grid-area: header;
            }
105
            .site-data > .sources {
Michał Woźniak's avatar
Michał Woźniak committed
106
                grid-area: sources;
Michał Woźniak's avatar
Michał Woźniak committed
107
            }
108
            .site-data > * .value {
Michał Woźniak's avatar
Michał Woźniak committed
109
110
111
                font-weight: bold;
                font-family: "Play Bold";
            }
112
            #sites-data-container {
Michał Woźniak's avatar
Michał Woźniak committed
113
                flex-grow:1;
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
Michał Woźniak committed
121
                display: flex;
Michał Woźniak's avatar
Michał Woźniak committed
122
                flex-direction: column;
123
124
                align-items:center;
                width:23em;
Michał Woźniak's avatar
Michał Woźniak committed
125
            }
Michał Woźniak's avatar
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;
            }
134
            .site-data-container .sites-select {
Michał Woźniak's avatar
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;
145
                min-width:15em;
Michał Woźniak's avatar
Michał Woźniak committed
146
            }
147
            .site-data-container .sites-select option {
148
149
                font-size:70%;
            }
150
            .site-data-container h2 {
Michał Woźniak's avatar
Michał Woźniak committed
151
152
                position:relative;
            }
153
            .site-data-container h2::after {
Michał Woźniak's avatar
Michał Woźniak committed
154
155
156
157
158
159
160
                position:absolute;
                right:0.5em;
                top:0.25em;
                content: "▾";
                display: block;
                color: springgreen;
            }
161
            #add-site-container {
162
                width:0px;
163
            }
164
            #add-site-container > a {
165
166
167
168
                font-size: 250%;
                text-decoration: none;
                border: dotted 1px springgreen;
                width: 1em;
169
                height: 0.97em;
170
171
172
173
174
                line-height: 90%;
                outline:none;
                text-align: Center;
                margin-top: 0.47em;
                color: springgreen;
175
                display: none;
Michał Woźniak's avatar
Michał Woźniak committed
176
177
178
            }
            #add-site.visible {
                display: inline-block;
179
            }
Michał Woźniak's avatar
Michał Woźniak committed
180
181
182
            .site-data-container:nth-of-type(6) + #add-site-container > #add-site {
                display:none;
            }
183
184
185
            .site-data-container:nth-of-type(2) ~ #add-site-container > #remove-site {
                display:inline-block;
            }
Michał Woźniak's avatar
Michał Woźniak committed
186
187
188
            #the-chart-container {
                height:70vh;
            }
Michał Woźniak's avatar
charts!    
Michał Woźniak committed
189
            #the-chart {
Michał Woźniak's avatar
Michał Woźniak committed
190
                display:block;
Michał Woźniak's avatar
charts!    
Michał Woźniak committed
191
            }
192
193
194
            #disclaimers-container {
                font-size:80%;
            }
195
196
197
198
199
            .chart-config-container {
                margin-top:1em;
                display:flex;
                justify-content: center;
                font-size:80%;
200
                flex-wrap: wrap;
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
            }
            .chart-config-container input {
                display:none;
            }
            .chart-config-container label {
                padding: 0.5em;
                border-radius:0.2em;
                background:#404040;
                box-shadow: inset 0px 0px 2px #333;
            }
            .chart-config-container input:checked + label {
                background:springgreen;
                color:black;
                box-shadow: 0px 0px 2px springgreen;
            }
216
217
218
            .chart-config-group {
                display:flex;
                justify-content: center;
219
220
221
222
223
                margin:0.5em 1em;
            }
            .chart-config-group > p {
                margin:0em;
                padding:0.5em;
224
            }
Michał Woźniak's avatar
Michał Woźniak committed
225
        </style>
226
227
    </head>
    <body>
228
229
230
231
232
233
234
235
        <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
Michał Woźniak committed
236
        <div class="sources"><a href="https://en.wikipedia.org/wiki/2019%E2%80%9320_coronavirus_pandemic">source</a></div>
237
238
239
240
241
242
243
        <div id="sites-data-container">
            <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
Michał Woźniak committed
244
            </div>
245
246
247
248
            <div id="add-site-container">
                <a href="#add-site" id="add-site">+</a>
                <a href="#remove-site" id="remove-site">-</a>
            </div>
249
        </div>
Michał Woźniak's avatar
charts!    
Michał Woźniak committed
250
251
        <div id="the-chart-container">
            <canvas id="the-chart"></canvas>
Michał Woźniak's avatar
Michał Woźniak committed
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
        </div>
        <div class="chart-config-container">
            <div class="chart-config-group">
                <p>Scale:</p>
                <input type="radio" id="chart-type-logarithmic" name="chart-type" value="logarithmic" checked="checked"/>
                <label for="chart-type-logarithmic">logarithmic</label>
                <input type="radio" id="chart-type-linear" name="chart-type" value="linear">
                <label for="chart-type-linear">linear</label>
            </div>
            <div class="chart-config-group">
                <p>Cases:</p>
                <input type="radio" id="chart-cases-cumulative" name="chart-cases" value="cumulative" checked="checked"/>
                <label for="chart-cases-cumulative">cumulative</label>
                <input type="radio" id="chart-cases-new" name="chart-cases" value="new" >
                <label for="chart-cases-new">new</label>
            </div>
            <div class="chart-config-group">
                <p>Start from:</p>
                <input type="radio" id="chart-start-first" name="chart-start" value="1"/>
                <label for="chart-start-first">1st</label>
                <input type="radio" id="chart-start-tenth" name="chart-start" value="10" checked="checked"/>
                <label for="chart-start-tenth">10th</label>
                <input type="radio" id="chart-start-hundredth" name="chart-start" value="100"/>
                <label for="chart-start-hundredth">100th</label>
                <input type="radio" id="chart-start-thousandth" name="chart-start" value="1000"/>
                <label for="chart-start-thousandth">1000th</label>
                <p>case</p>
279
            </div>
Michał Woźniak's avatar
charts!    
Michał Woźniak committed
280
        </div>
281
282
283
284
        <div id="disclaimers-container">
            <h3>Disclaimers:</h3>
            <ul>
                <li><p>This is all back-of-the-napkin math using data from Wikipedia. Take with a grain (or preferably, a spoonfull) of salt. Check your own sources. Make your own analysis.</p></li>
Michał Woźniak's avatar
Michał Woźniak committed
285
                <li><p>There are bugs. Wikipedia data is messy. A reasonable attempt is made to clean it before displaying, but it is far from perfect. Some infection areas might not yield any data. Some might have incomplete data.</p></li>
286
287
288
289
290
291
292
            </ul>
            <h3>Some great resources:</h3>
            <ul>
                <li><p><a href="http://covid.hi.is/">University of Iceland's COVID data model</a> (and its <a href="https://github.com/bgautijonsson/covid19/">sources</a>);</p></li>
                <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>
                <li><p>John Hopkin's 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.</p></li>
293
294
            </ul>
        </div>
295
        <footer>
Michał Woźniak's avatar
Michał Woźniak committed
296
            <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
297
            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
Michał Woźniak committed
298
            data from Wikipedia</p>
Michał Woźniak's avatar
Michał Woźniak committed
299
            <p>there are no <a href="https://barnacles.online">barnacle trackers</a> on this page: no fonts, styles, scripts, nor images fetched from third-party servers</p>
300
        </footer>
301
302
    </body>
</html>