Skip to content

GitLab

Switch branch/tag
Find file Normal viewHistoryPermalink
index.html 11.5 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
we now can display multiple sites    
Michał Woźniak committed
161 
            #add-site-container {
Michał Woźniak's avatar
style fixes for multiple site display    
Michał Woźniak committed
162 
                width:0px;
Michał Woźniak's avatar
we now can display multiple sites    
Michał Woźniak committed
163 
            }
Michał Woźniak's avatar
interface for removing sites added (not functional yet)    
Michał Woźniak committed
164 
            #add-site-container > a {
Michał Woźniak's avatar
we now can display multiple sites    
Michał Woźniak committed
165
166
167
168 
                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
169 
                height: 0.97em;
Michał Woźniak's avatar
we now can display multiple sites    
Michał Woźniak committed
170
171
172
173
174 
                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
175 
                display: none;
Michał Woźniak's avatar
various fixes    
Michał Woźniak committed
176
177
178 
            }
            #add-site.visible {
                display: inline-block;
Michał Woźniak's avatar
we now can display multiple sites    
Michał Woźniak committed
179 
            }
Michał Woźniak's avatar
six sites max please    
Michał Woźniak committed
180
181
182 
            .site-data-container:nth-of-type(6) + #add-site-container > #add-site {
                display:none;
            }
Michał Woźniak's avatar
interface for removing sites added (not functional yet)    
Michał Woźniak committed
183
184
185 
            .site-data-container:nth-of-type(2) ~ #add-site-container > #remove-site {
                display:inline-block;
            }
Michał Woźniak's avatar
charts!    
Michał Woźniak committed
186
187
188 
            #the-chart {
                height:50vh;
            }
Michał Woźniak's avatar
Finland fixed, fixes also Sweden (yay!); Disclaimers updated    
Michał Woźniak committed
189
190
191 
            #disclaimers-container {
                font-size:80%;
            }
Michał Woźniak's avatar
chart scale (linear/logarithmic) selection added    
Michał Woźniak committed
192
193
194
195
196 
            .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
197 
                flex-wrap: wrap;
Michał Woźniak's avatar
chart scale (linear/logarithmic) selection added    
Michał Woźniak committed
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212 
            }
            .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;
            }
Michał Woźniak's avatar
caching the data in global vars just a bit; more verbosity in case of errors;...    
Michał Woźniak committed
213
214
215 
            .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
216
217
218
219
220 
                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
221 
            }
Michał Woźniak's avatar
some style added    
Michał Woźniak committed
222 
        </style>
Michał Woźniak's avatar
starting to prepare the HTML site  
Michał Woźniak committed
223
224 
    </head>
    <body>
Michał Woźniak's avatar
started working on the interface; we now have a country selection drop-down...    
Michał Woźniak committed
225
226
227
228
229
230
231
232 
        <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
even more style, yo    
Michał Woźniak committed
233 
        <div class="sources"><a href="https://en.wikipedia.org/wiki/2019%E2%80%9320_coronavirus_pandemic">source</a></div>
Michał Woźniak's avatar
we now can display multiple sites    
Michał Woźniak committed
234
235
236
237
238
239
240 
        <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
style fixes    
Michał Woźniak committed
241 
            </div>
Michał Woźniak's avatar
interface for removing sites added (not functional yet)    
Michał Woźniak committed
242
243
244
245 
            <div id="add-site-container">
                <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
246 
        </div>
Michał Woźniak's avatar
charts!    
Michał Woźniak committed
247
248 
        <div id="the-chart-container">
            <canvas id="the-chart"></canvas>
Michał Woźniak's avatar
chart scale (linear/logarithmic) selection added    
Michał Woźniak committed
249 
            <div class="chart-config-container">
Michał Woźniak's avatar
caching the data in global vars just a bit; more verbosity in case of errors;...    
Michał Woźniak committed
250 
                <div class="chart-config-group">
Michał Woźniak's avatar
working on starting the charts from 1st/10th/100th/1000th case    
Michał Woźniak committed
251 
                    <p>Scale:</p>
Michał Woźniak's avatar
caching the data in global vars just a bit; more verbosity in case of errors;...    
Michał Woźniak committed
252 
                    <input type="radio" id="chart-type-logarithmic" name="chart-type" value="logarithmic" checked="checked"/>
Michał Woźniak's avatar
working on starting the charts from 1st/10th/100th/1000th case    
Michał Woźniak committed
253 
                    <label for="chart-type-logarithmic">logarithmic</label>
Michał Woźniak's avatar
caching the data in global vars just a bit; more verbosity in case of errors;...    
Michał Woźniak committed
254 
                    <input type="radio" id="chart-type-linear" name="chart-type" value="linear">
Michał Woźniak's avatar
working on starting the charts from 1st/10th/100th/1000th case    
Michał Woźniak committed
255 
                    <label for="chart-type-linear">linear</label>
Michał Woźniak's avatar
caching the data in global vars just a bit; more verbosity in case of errors;...    
Michał Woźniak committed
256 
                </div>
Michał Woźniak's avatar
new cases chart *almost* implemented (a bug appears!)    
Michał Woźniak committed
257 
                <div class="chart-config-group">
Michał Woźniak's avatar
working on starting the charts from 1st/10th/100th/1000th case    
Michał Woźniak committed
258 
                    <p>Cases:</p>
Michał Woźniak's avatar
caching the data in global vars just a bit; more verbosity in case of errors;...    
Michał Woźniak committed
259 
                    <input type="radio" id="chart-cases-cumulative" name="chart-cases" value="cumulative" checked="checked"/>
Michał Woźniak's avatar
working on starting the charts from 1st/10th/100th/1000th case    
Michał Woźniak committed
260 
                    <label for="chart-cases-cumulative">cumulative</label>
Michał Woźniak's avatar
caching the data in global vars just a bit; more verbosity in case of errors;...    
Michał Woźniak committed
261 
                    <input type="radio" id="chart-cases-new" name="chart-cases" value="new" >
Michał Woźniak's avatar
working on starting the charts from 1st/10th/100th/1000th case    
Michał Woźniak committed
262
263
264
265 
                    <label for="chart-cases-new">new</label>
                </div>
                <div class="chart-config-group">
                    <p>Start from:</p>
Michał Woźniak's avatar
axes are now correctly labeled    
Michał Woźniak committed
266 
                    <input type="radio" id="chart-start-first" name="chart-start" value="1"/>
Michał Woźniak's avatar
working on starting the charts from 1st/10th/100th/1000th case    
Michał Woźniak committed
267 
                    <label for="chart-start-first">1st</label>
Michał Woźniak's avatar
axes are now correctly labeled    
Michał Woźniak committed
268 
                    <input type="radio" id="chart-start-tenth" name="chart-start" value="10" checked="checked"/>
Michał Woźniak's avatar
working on starting the charts from 1st/10th/100th/1000th case    
Michał Woźniak committed
269
270
271
272
273
274 
                    <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>
Michał Woźniak's avatar
new cases chart *almost* implemented (a bug appears!)    
Michał Woźniak committed
275 
                </div>
Michał Woźniak's avatar
chart scale (linear/logarithmic) selection added    
Michał Woźniak committed
276 
            </div>
Michał Woźniak's avatar
charts!    
Michał Woźniak committed
277 
        </div>
Michał Woźniak's avatar
Finland fixed, fixes also Sweden (yay!); Disclaimers updated    
Michał Woźniak committed
278
279
280
281 
        <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
i before e except after c    
Michał Woźniak committed
282 
                <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>
Michał Woźniak's avatar
added a link to aatishb's charts    
Michał Woźniak committed
283 
                <li><p>Some great resources: <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>); <a href="https://covid-cases.now.sh/">COVID-19 Statistics</a> with some decent predictions; and <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
Finland fixed, fixes also Sweden (yay!); Disclaimers updated    
Michał Woźniak committed
284
285 
            </ul>
        </div>
Michał Woźniak's avatar
started working on the interface; we now have a country selection drop-down...    
Michał Woźniak committed
286 
        <footer>
Michał Woźniak's avatar
even more style, yo    
Michał Woźniak committed
287 
            <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
288 
            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
even more style, yo    
Michał Woźniak committed
289 
            data from Wikipedia</p>
Michał Woźniak's avatar
started working on the interface; we now have a country selection drop-down...    
Michał Woźniak committed
290 
        </footer>
Michał Woźniak's avatar
starting to prepare the HTML site  
Michał Woźniak committed
291
292 
    </body>
</html>