-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
117 lines (113 loc) · 7.63 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"></meta>
<meta name="viewport" content="width=device-width, initial-scale=0.4"></meta>
<meta name="twitter:card" content="summary_large_image"></meta>
<meta name="twitter:site" content="@vizbyarcher"></meta>
<meta name="twitter:creator" content="@vizbyarcher"></meta>
<meta name="twitter:title" content="How Fast is COVID19 Spreading in Your Area?"></meta>
<meta name="twitter:image" content="https://covid19viz.github.io/Confirmed.png"></meta>
<meta name="twitter:image:width" content="585"></meta>
<meta name="twitter:image:height" content="313"></meta>
<title>COVID-19 Viz</title>
<style>
body {
display: block;
font-family: Helvetica, Arial, sans-serif;
overflow: visible;
overflow-wrap: break-word;
box-sizing: border-box;
text-align: justify;
text-justify: inter-word;
line-height: 1.42857;
}
.bk-root {
max-width: 920px;
margin: auto;
padding: 5px;
}
/* unvisited link */
a:link {
color:#515151
}
/* visited link */
a:visited {
color: #515151;
}
/* mouse over link */
a:hover {
color:#515151
}
/* selected link */
a:active {
color:#515151
}
.row {
display: flex;
align-items: flex-end;
}
.column {
flex: 50%;
padding: 5px;
}
</style>
</head>
<body>
<div class="bk-root">
<div style="position: relative; top:5px; left:0px;">
<p style="display:block; margin-right:auto; margin-left:auto;">
<span style="color:black; font-size:calc(16px + 1.5vmin); font-weight: 600;">
How Fast Is COVID-19 Spreading in Your Area?
</span>
</p>
<p style="display:block; margin-right:auto; margin-left:auto;">
<div style="color:#515151; font-size:calc(16px + 0.5vmin); font-weight: 300; text-align: justify; text-justify: inter-word;">
<span style="color:black; font-weight: 600;">Regional Daily Tracker</span> of the total confirmed cases of COVID-19 per 100k inhabitants, by the number of days since the first confirmed case.
The lines are color coded by country (<span style="color:#de2910;font-weight: 700;">China</span>, <span style="color:#cd2e3a;font-weight: 700;">Korea</span>, <span style="color:#008c45;font-weight: 700;">Italy</span>, <span style="color:#ff9821;font-weight: 700;">Spain</span>, <span style="color:#000000;font-weight: 700;">Germany</span>, <span style="color:#3c3b6e;font-weight: 700;">U.S.A.</span>, <span style="color:#0055a4;font-weight: 700;">France</span>, <span style="color:#1d82d2;font-weight: 700;">UK</span>) and the size of the final dot of the plot line is based on the total number of confirmed cases to date.
<br><span style="color:black; font-style:normal; font-size:calc(16px + 0.5vmin); font-weight: 600;">Latest update: 04 May 2020</span>
</div>
<div style="font-style:italic;color:#515151;font-size:calc(16px + 0.5vmin);font-weight: 300;">
<a href="Confirmed.html"> <span style="font-weight:600;">Click here</span></a> for the interactive version (warning: wait a few seconds for the page to load)
</div>
<div>
<img src="Confirmed.png" alt="Line Chart showing COVID-19 Evolution" width=100%></img>
</div>
<div class="row">
<div class="column">
<video autoplay loop muted playsinline src="Race.mp4" poster="Race.gif" width=100% controls></video>
</div>
<div class="column">
<video autoplay loop muted playsinline src="Confirmed.mp4" poster="Confirmed.gif" width=100% controls></video>
</div>
</p>
</div>
<div style="position: relative; top:5px; left:0px;">
<p style="display:block; margin-right:auto; margin-left:auto; text-align:left;">
<span style="color:#515151; font-size:16px; font-weight: 300;">
<span style="color:black; font-weight: 600;">Design: @VizbyArcher © covid19viz.github.io</span>
</span>
</p>
<p style="display:block; margin-right:auto; margin-left:auto; text-align:left; text-justify:auto;">
<span style="color:#515151; font-size:16px; font-weight: 300;">
Covid19 Data Sources:
<br> China: <a href="https://github.com/BlankerL/DXY-COVID-19-Data/">https://github.com/BlankerL/DXY-COVID-19-Data/</a>
<br> Korea: <a href="https://github.com/parksw3/COVID19-Korea">https://github.com/parksw3/COVID19-Korea</a>
<br> Italy: <a href="https://github.com/pcm-dpc/COVID-19">https://github.com/pcm-dpc/COVID-19</a>
<br> Spain: <a href="https://github.com/datadista/datasets">Datadista.com</a>
<br> Germany: <a href="https://github.com/swildermann/COVID-19">https://github.com/swildermann/COVID-19</a>
<br> U.S.A.: <a href="https://github.com/CSSEGISandData/COVID-19">JHU CSSE</a>
<br> France: <a href="https://github.com/opencovid19-fr/data">https://github.com/opencovid19-fr/data</a>
<br> UK: <a href="https://github.com/tomwhite/covid-19-uk-data">https://github.com/tomwhite/covid-19-uk-data</a>
<br>Population and Other Sources:
<br> <a href="https://www.citypopulation.de/">CityPopulation.de</a>
<br> <a href="https://en.wikipedia.org/wiki/Main_Page">Wikipedia</a>
<br> <a href="https://www.istat.it/en/">Istat</a>
<br> <a href="https://www.census.gov/en.html">U.S. Census Bureau</a>
<br> <a href="https://www.ons.gov.uk/peoplepopulationandcommunity/populationandmigration/populationestimates/datasets/populationestimatesforukenglandandwalesscotlandandnorthernireland">UK Office for National Statistics</a>
</span>
</p>
</div>
</div>
</body>
</html>