-
Notifications
You must be signed in to change notification settings - Fork 0
/
covid19.html
182 lines (165 loc) · 14.3 KB
/
covid19.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
<!DOCTYPE html>
<html>
<head>
<title>Coronavirus charts</title>
<link href="/stylesheets/corona.css?1588018181" rel="stylesheet" type="text/css">
<meta name="author" content="Kuba Suder">
<meta name="description" content="Charts showing coronavirus growth in each country separately">
<meta property="og:url" content="https://mackuba.eu/corona/">
<meta property="og:title" content="Coronavirus charts">
<meta property="og:type" content="website">
<meta property="og:description" content="Charts showing coronavirus growth in each country separately">
<meta property="og:image" content="https://mackuba.eu/corona/screen.png?1588018181">
<meta name="twitter:site" content="@kuba_suder">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="Coronavirus charts">
<meta name="twitter:description" content="Charts showing coronavirus growth in each country separately">
<meta name="twitter:image" content="https://mackuba.eu/corona/screen.png?1588018181">
</head>
<body>
<div id="sidebar">
<div id="search">
<img src="/corona/icon-find.png?1588018181" alt="">
<input type="search" onkeydown="onCountrySearchKeyDown(event);" oninput="onCountrySearch(event);">
</div>
<ul id="list"></ul>
</div>
<nav>
<a id="help_button" href="#" onclick="return showHelp();"><img src="/corona/help-circle.png?1588018181" alt=""></a>
<a id="settings_button" href="#" onclick="return toggleExtraPanel();"><img src="/corona/cog.png?1588018181" alt=""></a>
<span class="segment" id="current_mode" style="display: none;">
<a href="#" data-mode="linear" class="first selected" onclick="return selectMode(this);">Linear</a><!--
--><a href="#" data-mode="logarithmic" onclick="return selectMode(this);">Logarithmic</a><!--
--><a href="#" data-mode="daily" onclick="return selectMode(this);">Daily change</a><!--
--><a href="#" data-mode="percent" class="last" onclick="return selectMode(this);">% change</a>
</span>
<span id="extra_panel">
<span class="panel-content">
<span class="segment" id="value_to_show" style="display: none;">
<a href="#" data-mode="confirmed" class="first selected"
onclick="return selectValueMode(this);">Confirmed</a><!--
--><a href="#" data-mode="active" onclick="return selectValueMode(this);">Active</a><!--
--><a href="#" data-mode="deaths" class="last" onclick="return selectValueMode(this);">Deaths</a>
</span>
<span id="checkboxes" style="display: none;">
<span id="span_align_by_100">
<input type="checkbox" id="align_by_100" onchange="changeAlignByDate();">
<label for="align_by_100">Align by day of 100th case</label><br>
</span>
<span id="span_last_weeks">
<input type="checkbox" id="last_weeks" onchange="changeLastWeeks();">
<label for="last_weeks">Show last 4 weeks</label><br>
</span>
<span id="span_by_population">
<input type="checkbox" id="by_population" onchange="changeByPopulation();">
<label for="by_population">Per 1 mln population</label><br>
</span>
<span id="span_show_trend">
<input type="checkbox" id="show_trend" onchange="changeShowTrend();">
<label for="show_trend">Show
<input type="text" id="trend_length" value="3" onchange="changeShowTrend();"
onfocus="onFocusTrendLength(this);" onblur="onBlurTrendLength(this);">-day trend</label>
<br>
</span>
</span>
</span>
</span>
</nav>
<div id="country_selection" style="display: none;">
<datalist id="country_list"></datalist>
<div class="box">
Add country<span class="can-hide">/region</span>:
<input type="text" id="place_search" autocomplete="off" list="country_list"
onkeypress="onAddCountryKeyPress(event);">
<a href="#" class="add" onclick="return addSelectedCountry();"><img src="/corona/add-circle.png?1588018181" alt=""></a>
<span class="separator">•</span>
<a href="#top_countries"
onclick="return selectCountrySetLink(this);">Top Global</a>
<a href="#top_in_europe"
onclick="return selectCountrySetLink(this);">Top Europe</a>
<a href="#top_us"
onclick="return selectCountrySetLink(this);">Top US<span class="can-hide"> States</span></a>
<a href="#compare_clear"
onclick="return selectCountrySetLink(this);">Clear<span class="can-hide"> All</span></a>
</div>
</div>
<div id="chart_container">
<div id="iphone_portrait_warning">
Warning: on smartphones it's recommended to view the site in landscape mode.
<a class="close" href="#"
onclick="document.getElementById('iphone_portrait_warning').style.display = 'none'; return false;">
<img src="/corona/remove-circle-dark.png?1588018181" alt=""></a>
</div>
<canvas id="corona_chart"></canvas>
</div>
<div id="help_overlay" onclick="closeHelp();"></div>
<div id="help_container">
<a class="close" href="#" onclick="return closeHelp();"><img src="/corona/remove-circle-white.png?1588018181" alt=""></a>
<div class="content">
<p>Note: data updates may be delayed due to changes in the source data that require updating the import code. You should see a warning if that happens. Data is also usually several hours behind the official dashboard - see the "last data update" in the footer.</p>
<h2>Changelog</h2>
<p><strong>25.04</strong>: The "Top Global" country set in the Compare view now excludes China, removed separate "Top Outside China" button. (You can always add China to any set through the "Add country" field.)</p>
<p><strong>24.04</strong>: On the "Daily change" and "% change" comparison charts you can now choose to see either raw values from that day or e.g. a 3-day or 5-day trend, and you can choose any trend length you want.</p>
<p><strong>22.04</strong>: Added some keyboard support - Cmd-F/Ctrl-F should focus the country search field, double ESC exits the field, and you should be able to move through the list of countries using up and down arrows.</p>
<p><strong>22.04</strong>: The JHU data keeps having issues with some areas, e.g. the increased numbers in France or the recent lack of updates in Australia, not to mention weird things happening regularly in the deaths & recovered numbers. I'm starting to look for other possible sources to at least supplement the JHU data in some problematic regions.</p>
<p><strong>17.04</strong>: You can now compare active cases in the Compare view. Active cases are not available for the places where I don't have the recovered numbers, which includes all US states and Canadian provinces.</p>
<p><strong>11.04</strong>: Added a new "Top US States" country set in the Compare view (yes, you can compare all states and provinces together with countries, plus the EU and Europe total).</p>
<p><strong>11.04</strong>: The URL should now store all current settings, including the set of selected countries, so you can bookmark or share a link and it should get you back to the same view as before, showing the same countries in the same configuration. Regardless of that, the Compare view will now always show the last seen set of countries by default, even after a reload.</p>
<p><strong>8.04</strong>: Mobile layout improvements: removed touch delay on buttons, sidebar and footer are slightly smaller, and some switches in the "Compare" view have been moved to a new additional panel which you can access through the "settings" (cog wheel) button on the right (the button is only visible on smaller screens).</p>
<p><strong>7.04</strong>: The "% increase" mode in Compare Countries now shows a 3-day trend instead of 5-day. The "Show last 3 weeks" checkbox automatically sets the max on the Y axis based on the maximum value during these 3 weeks.</p>
<p><strong>7.04</strong>: "Daily increase" mode is now available in the Compare Countries view.</p>
<p><strong>6.04</strong>: JHU have done something weird with the data from France since 4/4 (see <a href="https://www.lemonde.fr/planete/live/2020/04/05/coronavirus-aux-etats-unis-trump-annonce-une-periode-qui-va-etre-vraiment-horrible_6035613_3244.html?highlight=1187488818" target="_blank">comment from Le Monde here</a>, in French). The data from WHO, ECDC and the French government all show case numbers around 70K, not 90K. There are a few GitHub issue threads discussing this, but JHU hasn't responded yet (they rarely do). For now I'm overriding the numbers manually with the French government data.</p>
<p><strong>6.04</strong>: Added "Europe" and "EU 27" entries to the "Add country" search field so they can be compared e.g. with the US as a total. "Europe" total does not include Russia, Turkey and the Caucasus countries, but includes Greenland. (Tip: you can add EU 27 by typing simply "eu", United Kingdom by typing "uk" and United States by typing "us", and pressing enter after each.)</p>
<p><strong>2.04</strong>: Added a fourth line with active cases on single country views (where the number of recovered is available).</p>
<p><strong>31.03</strong>: Recent US state data is now taken from the new separate US data files that JHU has added last night (they're one day behind the global data).</p>
<p><strong>29.03</strong>: Added dark mode support (automatically follows the OS's theme).</p>
<p><strong>28.03</strong>: The URL now includes the linear/logarithmic/daily increase/percent setting, e.g. a link like <a href="https://mackuba.eu/corona/#europe.perc" target="_blank">https://mackuba.eu/corona/#europe.perc</a> will automatically open the % increase view. (Other settings like align by day or the selected set of countries in compare view aren't saved yet.)</p>
<p><strong>28.03</strong>: JHU has brought back the data file for recovered, so I've added that back to the charts. As for the US states, I'm evaluating another source from NYTimes.</p>
<p><strong>27.03</strong>: Added "Per 1 mln population" switch in the compare view.</p>
<p><strong>27.03</strong>: Added "% daily increase" mode in single country charts and the compare view.</p>
<p><strong>26.03</strong>: Added a search field in the country list sidebar.</p>
<p><strong>23.03</strong>: You can now add states and provinces to the Compare chart.</p>
<p><strong>23.03</strong>: Removed the "Top Countries" and "Top in Europe" views - use "Compare Countries" instead.</p>
<p><strong>23.03</strong>: Added an option to compare the number of deaths in "Compare Countries".</p>
<p><strong>18.03</strong>: Added a new section "Compare Countries" that works like the old "Top countries" sections, but lets you pick any country set, choose logarithmic scale, and align the data series horizontally by day since the 100th confirmed case.</p>
<p><strong>16.03</strong>: Several additional values from previous days for various countries were fixed manually (see below).</p>
<p><strong>16.03</strong>: The source data is sometimes missing new data for some important countries. In some cases I manually override the data with values found elsewhere - there is now a link in the footer that lists all those <a href="/corona/overrides.json?1588018181" target="_blank">data fixes</a>.</p>
<p><strong>12.03</strong>: Added last data update info in the footer.</p>
<p><strong>12.03</strong>: Added the "Top in Europe" chart.</p>
<p><strong>11.03</strong>: You can now link to a specific country chart, e.g. <a href="https://mackuba.eu/corona/#italy" target="_blank">https://mackuba.eu/corona/#italy</a>.</p>
<p><strong>11.03</strong>: Added this info dialog.</p>
<p><strong>11.03</strong>: Data from the US now includes per-state entries, which is in some cases significantly higher than the previously published per-county data (e.g. Washington), hence the sudden jump in US numbers on 10 March.</p>
<p><strong>6.03</strong>: First version.</p>
</div>
</div>
<footer class="long">
© <a href="https://mackuba.eu" target="_blank">Kuba Suder</a> |
Based on data from <a href="https://github.com/CSSEGISandData/COVID-19" target="_blank">Johns Hopkins CSSE</a>
+ <a href="/corona/overrides.json?1588018181" target="_blank">fixes</a> |
Last data update: 3 May 06:05 UTC | src: <a href="https://github.com/sentientmachine/corona_slider_interval">https://github.com/sentientmachine/corona_slider_interval</a>
</footer>
<footer class="short">
© <a href="https://mackuba.eu" target="_blank">Kuba Suder</a> |
Data: <a href="https://github.com/CSSEGISandData/COVID-19" target="_blank">Johns Hopkins CSSE</a>
+ <a href="/corona/overrides.json?1588018181" target="_blank">fixes</a> |
Updated: 3.05 06:05 UTC | src: <a href="https://github.com/sentientmachine/corona_slider_interval">https://github.com/sentientmachine/corona_slider_interval</a>
</footer>
<script type="text/javascript">
window.currentMode = 'linear';
window.europeanCountries = ["Albania","Andorra","Austria","Belarus","Belgium","Bosnia and Herzegovina","Bulgaria","Channel Islands","Croatia","Cyprus","Czechia","Denmark","Estonia","Faroe Islands","Finland","France","Germany","Gibraltar","Greece","Greenland","Hungary","Iceland","Ireland","Isle of Man","Italy","Kosovo","Latvia","Liechtenstein","Lithuania","Luxembourg","Malta","Moldova","Monaco","Montenegro","Netherlands","North Macedonia","Norway","Poland","Portugal","Romania","San Marino","Serbia","Slovakia","Slovenia","Spain","Sweden","Switzerland","Ukraine","United Kingdom","Vatican"];
window.euCountries = ["Austria","Belgium","Bulgaria","Croatia","Cyprus","Czechia","Denmark","Estonia","Finland","France","Germany","Greece","Hungary","Ireland","Italy","Latvia","Lithuania","Luxembourg","Malta","Netherlands","Poland","Portugal","Romania","Slovakia","Slovenia","Spain","Sweden"];
fetch("/corona/data.json?1588018181").then(function(response) {
return response.json();
}).then(function(json) {
window.coronaData = json;
if (window.coronaLoaded) {
initCorona();
}
}).catch(function(err) {
console.error("Error:", err);
});
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js" type="text/javascript"></script>
<script src="/javascripts/corona.js?1588018181" type="text/javascript"></script>
</body>
</html>