-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
302 lines (284 loc) · 23.1 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="icon" href="data:;base64,=">
<title>Covid-19 Visualizations</title>
<meta property="og:title" content="Worldwide Trends in Covid-19" />
<meta property="og:type" content="website" />
<meta property="og:description" content="Explore data on virus trajectory and government responses over time" />
<meta property="og:image" content="https://github.com/willjobs/d3-covid/raw/main/images/og_image.png" />
<meta property='og:url' content='https://willjobs.com/d3-covid'/>
<link rel="stylesheet" href="covid.css">
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
<script src="https://d3js.org/d3.v6.min.js"></script>
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
<script src="legend.js"></script>
</head>
<body>
<div id="introduction">
<h1>Worldwide Trends in Covid-19</h1>
<p><strong><span style="color:red">Note</span>: the data files are large, so the first time you load this page it may take a while to load.<br>
In addition, this site is best used on a computer 💻 (not a mobile device 📱).</strong></p>
<p>This series of visualizations helps illustrate trends in Covid-19 since January 1, 2020. It helps users gain an understanding of the trajectory of the virus (in terms of cases, deaths, hospitalizations, etc.) as well as society's response to and handling of the crisis. Users are also able to draw relationships between a society's policies and its Covid-19 outcomes.</p>
<p>There are two data sources for this project:</p>
<ul>
<li>The <a href="https://www.bsg.ox.ac.uk/research/research-projects/covid-19-government-response-tracker"><em>Oxford COVID-19 Government Response Tracker (OxCGRT)</em></a>, created by the Blavatnik School of Government at the University of Oxford. This dataset provided information on government policies amidst the pandemic</li>
<li>The <a href="https://github.com/owid/covid-19-data/tree/master/public/data"><em>Our World in Data Covid-19 Dataset</em></a>, created by the organization <a href="https://ourworldindata.org">Our World in Data</a>. This dataset provided information on daily and cumulative cases, deaths, hospitalized patients, ICU patients, tests, and vaccines administered. It also includes data on the economy, some health characteristics (e.g., prevalence of diabetes and smoking), and the country’s level of development</li>
</ul>
<p>In addition, the country polygons, in GeoJSON, were taken from <a href="https://datahub.io/core/geo-countries">https://datahub.io/core/geo-countries</a> and simplified using <a href="https://mapshaper.org">mapshaper</a>, reducing the file size from 23 MB to 9 MB.</p>
<p><a href="#definitions">Definitions</a> of all of the attributes are given at the bottom of the page. Note that, for ordinal variables, in cases where policies vary within a country (e.g., mask-mandates, etc.), the strictest value is chosen, combined with the suffix "-Local". Nation-wide policies have the suffix "-National".</p>
</div>
<div class="spinner"></div>
<div id="viz1-container" class="container" style="margin-left:-9999px">
<label for="viz1-attributes">Attribute: </label>
<select name="viz1-attributes" id="viz1-attributes"></select>
<label class="viz1 checkbox-container">Scale max to selected date
<input name="viz1-scale-checkbox" type="checkbox">
<span class="checkmark"></span>
</label>
<label class="viz1 checkbox-container">Quantile color scale
<input name="viz1-quantile-checkbox" type="checkbox">
<span class="checkmark"></span>
</label>
<br><br>
<div id="viz1-date-slider-wrap" style="width:600px">
<button class="date-slider play-button">Play</button>
</div>
<div class="viz1a title"><span></span></div>
<div id="map" style="margin-top:10px;"></div>
<div style="min-width:1200px; overflow:visible;">
<div class="viz1b" style="display:block; float:left;"></div>
<div class="viz1c" style="display:block; float:left;"></div>
<div class="viz1-continents" style="display:block; float:left;"></div>
</div>
<br clear="all">
</div>
<div id="viz2-container" class="container" style="margin-left:-9999px">
<div class="viz2">
<p>Latest data on <select name="viz2-categories" id="viz2-categories"></select>
for selected countries (<span id="table-date"></span>):</p>
<p class="table-title"></p>
<div class="viz2-table"></div>
</div>
</div>
<div id="viz3-container" class="container" style="margin-left:-9999px; clear:left;">
<div style="float:left; margin-bottom: 20px;">
<select name="viz3-countries" id="viz3-countries" multiple size="10"></select>
</div>
<div style="float:left; margin-left:20px">
<label for="viz3-xattributes">X-Axis: </label><select name="viz3-xattributes" id="viz3-xattributes"></select>
<br><br>
<label for="viz3-yattributes">Y-Axis: </label><select name="viz3-yattributes" id="viz3-yattributes"></select>
</div>
<div id="viz3-date-slider-wrap" style="width:600px; clear:left; padding-top: 20px">
<button class="date-slider play-button">Play</button>
</div>
<div class="viz3"></div>
</div>
<div id="definitions">
<h1>Definitions of attributes used above</h1>
<p>The following attributes and their definitions come from the data sources cited in the introduction at the top of the page. As mentioned above, for ordinal variables, in cases where policies vary within a country (e.g., mask-mandates, etc.), the strictest value is chosen, combined with the suffix "-Local". Nation-wide policies have the suffix "-National".</p>
<h3>Cases & Deaths</h3>
<ul>
<li><strong>New cases: </strong>New confirmed cases of COVID-19 (Source: OWID)</li>
<li><strong>New cases, per million: </strong>New confirmed cases of COVID-19 per 1,000,000 people (Source: OWID)</li>
<li><strong>Total cases: </strong>Total (cumulative) confirmed cases of COVID-19 (Source: OWID)</li>
<li><strong>Total cases, per million: </strong>Total (cumulative) confirmed cases of COVID-19 per 1,000,000 people (Source: OWID)</li>
<li><strong>New deaths: </strong>New deaths attributed to COVID-19 (Source: OWID)</li>
<li><strong>New deaths, per million: </strong>New deaths attributed to COVID-19 per 1,000,000 people (Source: OWID)</li>
<li><strong>Total deaths: </strong>Total deaths attributed to COVID-19 (Source: OWID)</li>
<li><strong>Total deaths, per million: </strong>Total deaths attributed to COVID-19 per 1,000,000 people (Source: OWID)</li>
</ul>
<h3>Tests</h3>
<ul>
<li><strong>New tests: </strong>New tests for COVID-19 (only calculated for consecutive days) (Source: OWID)</li>
<li><strong>New tests, per thousand: </strong>New tests for COVID-19 per 1,000 people (Source: OWID)</li>
<li><strong>Total tests: </strong>Total tests for COVID-19 (Source: OWID)</li>
<li><strong>Total tests, per thousand: </strong>Total tests for COVID-19 per 1,000 people (Source: OWID)</li>
<li><strong>Positive rate: </strong>The share of COVID-19 tests that are positive, given as a rolling 7-day average (Source: OWID)</li>
<li><strong>Reproduction rate (R0): </strong>Real-time estimate of the effective reproduction rate (R) of COVID-19 (Source: OWID)</li>
</ul>
<h3>Vaccinations</h3>
<ul>
<li><strong>New vaccinations: </strong>New COVID-19 vaccination doses administered (only calculated for consecutive days) (Source: OWID)</li>
<li><strong>New vaccinations, per hundred: </strong>Calculated using "New vaccinations" and "Population" (Source: OWID)</li>
<li><strong>People vaccinated: </strong>Total number of people who received at least one vaccine dose (Source: OWID)</li>
<li><strong>People vaccinated, per hundred: </strong>Total number of people who received at least one vaccine dose per 100 people in the total population (Source: OWID)</li>
<li><strong>People fully vaccinated: </strong>Total number of people who received all doses prescribed by the vaccination protocol (Source: OWID)</li>
<li><strong>People fully vaccinated, per hundred: </strong>Total number of people who received all doses prescribed by the vaccination protocol per 100 people in the total population (Source: OWID)</li>
</ul>
<h3>Hospitals</h3>
<ul>
<li><strong>ICU patients: </strong>Number of COVID-19 patients in intensive care units (ICUs) on a given day (Source: OWID)</li>
<li><strong>ICU patients, per million: </strong>Number of COVID-19 patients in intensive care units (ICUs) on a given day per 1,000,000 people (Source: OWID)</li>
<li><strong>ICU admissions (weekly): </strong>Number of COVID-19 patients newly admitted to intensive care units (ICUs) in a given week (Source: OWID)</li>
<li><strong>ICU admissions (weekly), per million: </strong>Number of COVID-19 patients newly admitted to intensive care units (ICUs) in a given week per 1,000,000 people (Source: OWID)</li>
<li><strong>Hospitalized patients: </strong>Number of COVID-19 patients in hospital on a given day (Source: OWID)</li>
<li><strong>Hospitalized patients, per million: </strong>Number of COVID-19 patients in hospital on a given day per 1,000,000 people (Source: OWID)</li>
<li><strong>Hospital admissions (weekly): </strong>Number of COVID-19 patients newly admitted to hospitals in a given week (Source: OWID)</li>
<li><strong>Hospital admissions (weekly), per million: </strong>Number of COVID-19 patients newly admitted to hospitals in a given week per 1,000,000 people (Source: OWID)</li>
</ul>
<h3>Aggregate Indices</h3>
<ul>
<li><strong>Containment health index: </strong>A composite measure based on 13 containment and health indicators, including including school closures, workplace closures, travel bans, testing policy, contact tracing, face coverings, and vaccine policy. It was rescaled from 0 to 100 (100 = most support). (Source: OxCGRT)</li>
<li><strong>Economic support index: </strong>A composite measure based on two economic indicators: income support and debt/contract relief. It was rescaled from 0 to 100 (100 = most support). (Source: OxCGRT)</li>
<li><strong>Government response index: </strong>Composite measure of 16 response variables, scaled from 0 to 100 (100 = largest response). For policies that vary within a country, the largest value is shown. Includes variables on containment, economic stimulus, and health policies. (Source: OxCGRT)</li>
<li><strong>Stringency index: </strong>Composite measure of 9 response variables, including school closures, workplace closures, and travel bans. It is scaled from 0 to 100 (100 = largest response). For policies that vary within a country, the largest value is shown. (Source: OxCGRT)</li>
</ul>
<h3>Containment Policies</h3>
<ul>
<li><strong>Cancel public events: </strong>Record cancelling public events. (Source: OxCGRT). Coding:
<ul>
<li>0 - no measures</li>
<li>1 - recommend cancelling</li>
<li>2 - require cancelling</li>
</ul>
</li>
<li><strong>Close public transport: </strong>Record closing of public transport. (Source: OxCGRT). Coding:
<ul>
<li>0 - no measures</li>
<li>1 - recommend closing (or significantly reduce volume/route/means of transport available)</li>
<li>2 - require closing (or prohibit most citizens from using it)</li>
</ul>
</li>
<li><strong>International travel controls: </strong>Record restrictions on international travel. (Source: OxCGRT). Coding:
<ul>
<li>0 - no restrictions</li>
<li>1 - screening arrivals</li>
<li>2 - quarantine arrivals from some or all regions</li>
<li>3 - ban arrivals from some regions</li>
<li>4 - ban on all regions or total border closure</li>
</ul>
</li>
<li><strong>Restrictions on gatherings: </strong>Record limits on gatherings. (Source: OxCGRT). Coding:
<ul>
<li>0 - no restrictions</li>
<li>1 - restrictions on very large gatherings (the limit is above 1000 people)</li>
<li>2 - restrictions on gatherings between 101-1000 people</li>
<li>3 - restrictions on gatherings between 11-100 people</li>
<li>4 - restrictions on gatherings of 10 people or less</li>
</ul>
</li>
<li><strong>Restrictions on movement: </strong>Record restrictions on internal movement between. (Source: OxCGRT). Coding:
<ul>
<li>0 - no measures</li>
<li>1 - recommend not to travel between regions/cities</li>
<li>2 - internal movement restrictions in place</li>
</ul>
</li>
<li><strong>School closing: </strong>Record closings of schools and universities. (Source: OxCGRT). Coding:
<ul>
<li>0 - no measures</li>
<li>1 - recommend closing or all schools open with alterations resulting in significant differences compared to non-Covid-19 operations</li>
<li>2 - require closing (only some levels or categories, eg just high school, or just public schools)</li>
<li>3 - require closing all levels</li>
</ul>
</li>
<li><strong>Stay at home requirements: </strong>Record orders to "shelter-in-place" and otherwise confine to the home. (Source: OxCGRT). Coding:
<ul>
<li>0 - no measures</li>
<li>1 - recommend not leaving house</li>
<li>2 - require not leaving house with exceptions for daily exercise, grocery shopping, and 'essential' trips</li>
<li>3 - require not leaving house with minimal exceptions (eg allowed to leave once a week, or only one person can leave at a time, etc). (Source: OxCGRT)</li>
</ul>
</li>
<li><strong>Workplace closing: </strong>Record closings of workplaces. (Source: OxCGRT). Coding:
<ul>
<li>0 - no measures</li>
<li>1 - recommend closing (or recommend work from home)</li>
<li>2 - require closing (or work from home) for some sectors or categories of workers</li>
<li>3 - require closing (or work from home) for all-but-essential workplaces (eg grocery stores, doctors)</li>
</ul>
</li>
</ul>
<h3>Economic Policies</h3>
<ul>
<li><strong>Debt contract relief: </strong>Record if the government is freezing financial obligations for households (eg stopping loan repayments, preventing services like water from stopping, or banning evictions). (Source: OxCGRT). Coding:
<ul>
<li>0 - no debt/contract relief</li>
<li>1 - narrow relief, specific to one kind of contract</li>
<li>2 - broad debt/contract relief</li>
</ul>
</li>
<li><strong>Fiscal measures: </strong>Announced economic stimulus spending (additional to previously announced amounts). Record monetary value in USD of fiscal stimuli, includes any spending or tax cuts NOT included in "International support", "Emergency investment in healthcare", or "Investment in vaccines". (Source: OxCGRT)</li>
<li><strong>Income support: </strong>Record if the government is providing direct cash payments to people who lose their jobs or cannot work. (Source: OxCGRT). Coding:
<ul>
<li>0 - no income support</li>
<li>1 - government is replacing less than 50% of lost salary (or if a flat sum, it is less than 50% median salary)</li>
<li>2 - government is replacing 50% or more of lost salary (or if a flat sum, it is greater than 50% median salary)</li>
</ul>
</li>
<li><strong>International support: </strong>Announced offers of Covid-19 related aid spending to other countries, additional to any previously announced spending. Monetary amounts in USD. (Source: OxCGRT)</li>
</ul>
<h3>Health Policies</h3>
<ul>
<li><strong>Contact tracing: </strong>Record government policy on contact tracing after a positive diagnosis. Note: dataset creators are looking for policies that would identify all people potentially exposed to Covid-19; voluntary bluetooth apps are unlikely to achieve this. (Source: OxCGRT). Coding:
<ul>
<li>0 - no contact tracing</li>
<li>1 - limited contact tracing; not done for all cases</li>
<li>2 - comprehensive contact tracing; done for all identified cases</li>
</ul>
</li>
<li><strong>Emergency investment in healthcare: </strong>Announced short term spending on healthcare system, eg hospitals, masks, etc., additional to any previously announced spending. Monetary amounts in USD. (Source: OxCGRT)</li>
<li><strong>Facial coverings: </strong>Record policies on the use of facial coverings outside the home. (Source: OxCGRT). Coding:
<ul>
<li>0 - No policy</li>
<li>1 - Recommended</li>
<li>2 - Required in some specified shared/public spaces outside the home with other people present, or some situations when social distancing not possible</li>
<li>3 - Required in all shared/public spaces outside the home with other people present or all situations when social distancing not possible</li>
<li>4 - Required outside the home at all times regardless of location or presence of other people</li>
</ul>
</li>
<li><strong>Investment in vaccines: </strong>Announced public spending on Covid-19 vaccine development, additional to previously announced spending. Monetary amounts in USD. (Source: OxCGRT)</li>
<li><strong>Public info campaigns: </strong>Record presence of public info campaigns. (Source: OxCGRT). Coding:
<ul>
<li>0 - no Covid-19 public information campaign</li>
<li>1 - public officials urging caution about Covid-19</li>
<li>2 - coordinated public information campaign (eg across traditional and social media)</li>
</ul>
</li>
<li><strong>Testing policy: </strong>Record government policy on who has access to testing. Note: this records policies about testing for current infection (PCR tests) not testing for immunity (antibody test). (Source: OxCGRT). Coding:
<ul>
<li>0 - no testing policy</li>
<li>1 - only those who both (a) have symptoms AND (b) meet specific criteria (eg key workers, admitted to hospital, came into contact with a known case, returned from overseas)</li>
<li>2 - testing of anyone showing Covid-19 symptoms</li>
<li>3 - open public testing (eg "drive through" testing available to asymptomatic people)</li>
</ul>
</li>
<li><strong>Vaccination policy: </strong>Record policies for vaccine delivery for different groups. (Source: OxCGRT). Coding:
<ul>
<li>0 - No availability</li>
<li>1 - Availability for ONE of following: key workers/ clinically vulnerable groups (non elderly) / elderly groups</li>
<li>2 - Availability for TWO of following: key workers/ clinically vulnerable groups (non elderly) / elderly groups</li>
<li>3 - Availability for ALL of following: key workers/ clinically vulnerable groups (non elderly) / elderly groups</li>
<li>4 - Availability for all three plus partial additional availability (select broad groups/ages)</li>
<li>5 - Universal availability</li>
</ul>
</li>
</ul>
<h3>Demographics</h3>
<ul>
<li><strong>Population: </strong>Population in 2020 (Source: OWID)</li>
<li><strong>Population density (pop/km^2): </strong>Number of people divided by land area, measured in square kilometers, most recent year available (Source: OWID)</li>
<li><strong>Median age: </strong>Median age of the population, UN projection for 2020 (Source: OWID)</li>
<li><strong>Age 65+ (% of pop): </strong>Share of the population that is 65 years and older, most recent year available (Source: OWID)</li>
<li><strong>Age 70+ (% of pop): </strong>Share of the population that is 70 years and older in 2015 (Source: OWID)</li>
<li><strong>Life expectancy at birth, 2019: </strong>Life expectancy at birth in 2019 (Source: OWID)</li>
<li><strong>GDP per capita: </strong>Gross domestic product at purchasing power parity (constant 2011 international dollars), most recent year available (Source: OWID)</li>
<li><strong>Extreme poverty (% of pop): </strong>Share of the population living in extreme poverty, most recent year available since 2010 (Source: OWID)</li>
<li><strong>Human development index (UN): </strong>A composite index measuring average achievement in three basic dimensions of human development—a long and healthy life, knowledge and a decent standard of living. Values for 2019. (Source: OWID)</li>
<li><strong>Cardiovascular death rate (deaths per 100k): </strong>Death rate from cardiovascular disease in 2017 (annual number of deaths per 100,000 people) (Source: OWID)</li>
<li><strong>Diabetes prevalence (% of pop): </strong>Diabetes prevalence (% of population aged 20 to 79) in 2017 (Source: OWID)</li>
<li><strong>Smokers, female (% of pop): </strong>Share of women who smoke, most recent year available (Source: OWID)</li>
<li><strong>Smokers, male (% of pop): </strong>Share of men who smoke, most recent year available (Source: OWID)</li>
</ul>
</div>
<script src="viz_all.js"></script>
<script>
// this makes it so chrome doesn't reload halfway down the page
// https://stackoverflow.com/a/48406913/1102199
history.scrollRestoration = "manual";
</script>
</body>
</html>