forked from paolini/covid19-charts
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
329 lines (317 loc) · 20.8 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
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
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
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
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
<!DOCTYPE HTML>
<html>
<head>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-RZ7M4MJKYH"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-RZ7M4MJKYH');
</script>
<title>covid-19 charts</title>
<link rel="stylesheet" href="index.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-csv/1.0.8/jquery.csv.js"></script>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<script src="chartjs-plugin-colorschemes.min.js"></script>
<script src="chartjs-plugin-annotation.min.js"></script>
<!--script src="utf8.js"></script-->
<script src="chart.js"></script>
<script src="table.js"></script>
<script src="series.js"></script>
<script src="dataset.js"></script>
<script src="dataset_hopkins.js"></script>
<script src="dataset_dpc.js"></script>
<script src="dataset_vaccini.js"></script>
<script src="dataset_lockdown.js"></script>
<script src="dataset_epcalc.js"></script>
<script src="epcalc.js"></script>
<script src="index.js"></script>
<script src="population.js"></script>
<style>
canvas {
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
}
</style>
</head>
<body>
<div class="header">
<h1 id="title">CoVID-19 Charts</h1>
</div>
<div class="main">
<div class="warning">
<h1>Disclaimer</h1>
<p>This application is fetching data from the sources described below (namely italian dpc for italian data, and Hopkins University for world data).
Only a very simplistic and objective analysis is performed:
see the explanations given below before giving any significance to the data plotted.
You are encouraged to report any problem by <a href="https://github.com/paolini/covid19-charts/issues">opening an issue on github</a>.</p>
</div>
<ul class="data">
<li>Data source:
<select name="data_source">
<!-- option value=""><i>** select data source **</i></option -->
<option value="hopkins">World data by John Hopkins Univ.</option>
<option value="hopkinsUS">US data by John Hopkins Univ.</option>
<option value="dpc">Italian data by "protezione civile"</option>
<option value="vaccini">Italian vaccination by italian PCM</option>
<option value="lockdown">aura vision lockdown dates</option>
<option value="epcalc">epidemic calculator</option>
</select>
<ul id="dpc_box" class="data_source">
<li>data collected from <a href="https://github.com/pcm-dpc/COVID-19">here</a></li>
<li>Data set:
<select class="dataset_select">
<option value="dpc_nazione">Dati Nazionali</option>
<option value="dpc_regioni">Dati Regioni</option>
<option value="dpc_province">Dati Province</option>
</select>
</li>
<li>Series:
<select name="italia_column" class="dpc nazione dataset_option"></select>
<select name="regioni_codice_regione" class="dpc regioni dataset_option"></select>
<select name="regioni_column" class="dpc regioni dataset_option"></select>
<select name="province_codice_provincia" class="dpc province dataset_option"></select>
<select name="province_column" class="dpc province dataset_option"></select>
</li>
<li id="modifier_span">Modifier:
<select name="dpc_modifier">
<option value="*">dato originale</option>
<option value="incremento *">incremento</option>
<option value="tasso *">tasso di crescita</option>
<option value="tasso incremento *">tasso di crescita incremento</option>
<option value="* / popolazione">dato / popolazione</option>
<option value="incremento * / popolazione">incremento dato / popolazione</option>
<option value="* / totale_casi">dato / totale casi</option>
<option value="* / tamponi">dato / tamponi</option>
<option value="* / casi_testati">dato / casi testati</option>
<option value="* / nuovi_positivi">dato / nuovi positivi</option>
<option value="incremento * / nuovi_positivi">incremento dato / nuovi positivi</option>
<option value="* / incremento casi_testati">dato / incremento casi testati</option>
<option value="* / incremento tamponi">dato / incremento tamponi</option>
</select>
</li>
</ul>
<ul id="vaccini_box" class="data_source">
<li>data collected from <a href="https://github.com/italia/covid19-opendata-vaccini">here</a></li>
<li>Data set:
<select class="dataset_select">
<option value="vaccini_somministrazione">Somministrazione</option>
</select>
</li>
<li>Series:
<select name="somministrazione_codice_regione_ISTAT" class="vaccini somministrazione dataset_option"></select>
<select name="somministrazione_column" class="vaccini somministrazione dataset_option"></select>
</li>
<li id="modifier_span">Modifier:
<select name="vaccini_modifier">
<option value="*">dato originale</option>
<option value="accumulo *">accumulo</option>
<option value="* / popolazione">dato / popolazione</option>
<option value="accumulo * / popolazione">accumulo dato / popolazione</option>
</select>
</li>
</ul>
<ul id="hopkins_box" class="data_source">
<li>data collected from <a href="https://github.com/CSSEGISandData/COVID-19">here</a></li>
<li>Data set:
<select class="dataset_select">
<option value="hopkins_confirmed">Confirmed</option>
<option value="hopkins_deaths">Deaths</option>
<option value="hopkins_recovered">Recovered</option>
</select>
</li>
<li>Series:
<select name="confirmed_supranat" class="hopkins confirmed dataset_option"></select>
<select name="confirmed_filter" class="hopkins confirmed dataset_option"></select>
<select name="confirmed_subfilter" class="hopkins confirmed dataset_option hide"></select>
<select name="confirmed_column" class="hopkins confirmed dataset_option"></select>
<select name="deaths_supranat" class="hopkins deaths dataset_option"></select>
<select name="deaths_filter" class="hopkins deaths dataset_option"></select>
<select name="deaths_subfilter" class="hopkins deaths dataset_option hide"></select>
<select name="deaths_column" class="hopkins deaths dataset_option"></select>
<select name="recovered_supranat" class="hopkins recovered dataset_option"></select>
<select name="recovered_filter" class="hopkins recovered dataset_option"></select>
<select name="recovered_subfilter" class="hopkins recovered dataset_option hide"></select>
<select name="recovered_column" class="hopkins recovered dataset_option"></select>
</li>
</ul>
<ul id="hopkinsUS_box" class="data_source">
<li>data collected from <a href="https://github.com/CSSEGISandData/COVID-19">here</a></li>
<li>Data set:
<select class="dataset_select">
<option value="hopkinsUS_confirmedUS">Confirmed</option>
<option value="hopkinsUS_deathsUS">Deaths</option>
</select>
</li>
<li>Series:
<select name="confirmedUS_filter" class="hopkinsUS confirmedUS dataset_option"></select>
<select name="confirmedUS_subfilter" class="hopkinsUS confirmedUS dataset_option hide"></select>
<select name="confirmedUS_column" class="hopkinsUS confirmedUS dataset_option"></select>
<select name="deathsUS_filter" class="hopkinsUS deathsUS dataset_option"></select>
<select name="deathsUS_subfilter" class="hopkinsUS deathsUS dataset_option hide"></select>
<select name="deathsUS_column" class="hopkinsUS deathsUS dataset_option"></select>
</li>
</ul>
<ul id="lockdown_box" class="data_source">
<li>data has been extracted from here <a href="https://auravision.ai/covid19-lockdown-tracker/">aura vision lockdown tracker</a></li>
<li>Series:
<select name="lockdown_filter" class="lockdown"></select>
</li>
</ul>
<ul id="epcalc_box" class="data_source">
<li>code based on <a href="https://github.com/gabgoh/epcalc">gagboh</a> epidemic calculator <a href="https://gabgoh.github.io/COVID/index.html">live</a></li>
<li>Calculator parameters:
<span id="epcalc_params">
</span>
--- auto_update: <input name="epcalc_auto_update" type="checkbox" checked="checked">
</li>
<li>Series:
<select name="epcalc_column">
<option value="S">S</option>
<option value="E">E</option>
<option value="I">I</option>
<option value="R">R</option>
<option value="hospital">hospital</option>
<option value="severe">severe</option>
<option value="recovered">recovered</option>
<option value="deceased">deceased</option>
</select>
(daily cases)
</li>
</ul>
</li>
<li id="series_filter_li">Smoothing:
<select name="filter">
<option value="identity">no filter</option>
<option value="flat">flat</option>
<option value="flat_centered">flat centered</option>
<option value="log_flat">log flat</option>
<option value="log_flat_centered">log flat centered</option>
<option value="binomial">binomial</option>
</select>
<span id="period_span">filter days: <input id="period" name="period" value="7" size="2"></span>
</li>
<li>
Press button: <button name="plot"><i class="fas fa-chart-line"></i> Plot</button>
</li>
</ul>
<div class="box">
<!--h3 style="margin-bottom: 16px;">Options</h3-->
<li>
<button name="chart_clear"><i class="fas fa-trash-alt"></i> Remove all plots</button>
<button name="chart_pop"><i class="fas fa-minus"></i> Remove last plot</button>
<button name="create_url"><i class="fas fa-link"></i> Set url to link this chart</button>
<a id="download_button" href="#"><i class="fas fa-download"></i> Download data as a CSV file</a>
</li>
<li>
plot type
<select name="chart_type">
<option value="linear">linear</option>
<option value="log">logaritmic</option>
<option value="rate">growth rate</option>
<option value="rate_smooth">growth rate smooth</option>
</select>
-- draw fitting exponential <input type="checkbox" name="draw_fit">
-- consider
<select name="n_points">
<option value="">all data points</option>
<option value="356">last 356 points</option>
<option value="200">last 200 points</option>
<option value="100">last 100 points</option>
<option value="56">last 56 points</option>
<option value="49">last 49 points</option>
<option value="42">last 42 points</option>
<option value="35">last 35 points</option>
<option value="28">last 28 points</option>
<option value="21">last 21 points</option>
<option value="14">last 14 points</option>
<option value="10">last 10 points</option>
<option value="9">last 9 points</option>
<option value="8">last 8 points</option>
<option value="7">last 7 points</option>
<option value="6">last 6 points</option>
<option value="5">last 5 points</option>
<option value="4">last 4 points</option>
<option value="3">last 3 points</option>
<option value="2">last 2 points</option>
</select>
-- up to date <input name="up_to_date" size="5">
-- time alignment
<select name="time_shift">
<option value="">none</option>
<option value="lr_shift">prediction shift</option>
<option value="past_shift">history shift</option>
</select>
-- advanced settings <input name="advanced_settings" type="checkbox">
</li>
<li id="advanced_settings">
-- x-axis day min <input name="axis_days_min" size="5">
-- x-axis day max <input name="axis_days_max" size="5">
-- x-axis date min <input name="axis_date_min" size="5">
-- x-axis date max <input name="axis_date_max" size="5">
-- y-axis count min <input name="axis_count_min" size="5">
-- y-axis count max <input name="axis_count_max" size="5">
-- fit future days <input name="fit_future_days" value="5" size="5">
-- zero at date <input name="zero_date" size="5">
</li>
</div>
<div style="width:100%;">
<canvas id="canvas"></canvas>
</div>
<ul id="chart_info">
</ul>
<div class="warning">
<h1>Explanation</h1>
<p>
A <b>data series</b> is loaded from the selected <b>data set</b>
of the given <b>data source</b>.
For DPC series a <b>modifier</b> option is available;
<i>incremento:</i> daily increment of given series,
<i>tasso:</i> daily percentual increment,
<i>tasso incremento:</i> daily percentual increment of increment,
<i>ratio:</i> percentual ratio between two series or with population.
Each series is possibly filtered with the specified <b>smoothing</b> filter;
<i>flat:</i> is a running average over the specified number of days in the past,
<i>flat centered:</i> as flat but the average is centered on the current day (no delay, but there is an effect on boundary points),
<i>log flat:</i> as flat but the logariths of the values are averaged,
<i>log flat centered:</i> as flat centered but the logarithms are averaged,
<i>binomial:</i> is a filter with binomial coefficients (approximating a gaussian filter).
If the series is a ratio of two dataset (or a rate of growth)
the filters are applied to each series before computing the ratio.
From each series <i>y=y(t)</i> we consider as many data points in the past as specified by the user
up to the date specified (or today if no date is specified in the <b>up to date</b> input field).
We compute the <b>linear regression</b> of the logarithms of the values: <i>log(y) = mt + q</i>.
This gives the exponential fit curve <i>y=exp(mt+q)</i>.
The <i>average daily increase</i> is the average daily percentual increase: <i>exp(m)-1</i>.
<i>Rt</i> is computed assuming 7 days average time of infection <i>exp(7m)</i>.
The <i>origin</i> is the time when the exponential fit has a unit value: <i>t=-q/m</i>.
The <i>growth rate</i> plot shows the percentual increase in each day with respect to the previous day.
The <i>growth rate smooth</i> smooth also adds a smoothing filter.
The <i>time alignment</i> selection translates each curve in time with respect to the first curve
plotted.
If <b>prediction shift</b> is selected, each curve is shifted by the number of days required to reach
the level of the first curve following the current exponential trend.
If <b>history shift</B> is selected, each curve is shifted by the number of days in the past
when the first curve had the same value (when the first curve is larger than the current) or
in the future when it has the same value of the first curve (when the first curve is smaller than the current).
If you press the button <b>set url for this chart</b> the url of the page is changed
so that you can save or share a link to the current chart.
To perform your own analysis you can download the data in CSV format.
</p>
</div>
<div class="footer">
<p>
<a href="https://github.com/paolini/covid19-charts">Code on <i class="fab fa-github"></i></a>
(<a href="https://github.com/paolini/covid19-charts/commits/master">latest changes</a>)
</p></div>
</div>
</body>
</html>