-
Notifications
You must be signed in to change notification settings - Fork 1
/
index_test.html
161 lines (150 loc) · 10.5 KB
/
index_test.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
<!DOCTYPE html><html lang="de"><head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Corona in den Altersgruppen — COVID-19-Inzidenzen in Landkreisen und kreisfreien Städten</title>
<meta name="description" content="Heatmap-Visualisierung der COVID-19-Sieben-Tage-Inzidenzen nach Altersgruppen in den 294 Landkreisen und 107 kreisfreien Städten in Deutschland">
<meta name="”robots”" content="”index,follow”">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:creator" content="@tschach">
<meta name="twitter:title" content="Corona in den Altersgruppen">
<meta name="twitter:description" content="Heatmap-Visualisierung der COVID-19-Sieben-Tage-Inzidenzen nach Altersgruppen in den 294 Landkreisen und 107 kreisfreien Städten in Deutschland">
<meta name="twitter:image" content="https://tschach.github.io/covaltvis/assets/twitter-card-image-600x600.png">
<meta property="og:title" content="Corona in den Altersgruppen">
<meta property="og:site_name" content="covaltvis/">
<meta property="og:url" content="https://tschach.github.io/covaltvis/">
<meta property="og:description" content="Heatmap-Visualisierung der COVID-19-Sieben-Tage-Inzidenzen nach Altersgruppen in den 294 Landkreisen und 107 kreisfreien Städten in Deutschland">
<meta property="og:type" content="website">
<meta property="og:image" content="https://tschach.github.io/covaltvis/assets/opengraph-image-600x315.png">
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">
<link rel="manifest" href="site.webmanifest">
<link rel="mask-icon" href="safari-pinned-tab.svg" color="#333333">
<meta name="msapplication-TileColor" content="#f0f8ff">
<meta name="theme-color" content="#f0f8ff">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css" crossorigin="anonymous" integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tom-select@1.7.7/dist/css/tom-select.bootstrap5.css" crossorigin="anonymous" integrity="sha256-Vdxpq4GkxCZSBrkPwPYMG8O+yL0RkNWX9DyM1z0QfTE=">
<link href="assets/style.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<header class="pt-xl-5 pt-2 offset-xl-1 col-xl-10">
<h1 class="display-3 text-muted">Corona in den Altersgruppen</h1>
<p class="lead text-muted">
Visualisierung („Heatmap“) der COVID-19-Sieben-Tage-Inzidenzwerte nach Altersgruppen in den 294 Landkreisen und 107 kreisfreien Städten in Deutschland
</p>
<dl class="row text-muted pt-xl-4 pt-2">
<dt class="col-xl-3">Datenquellen</dt>
<dd class="col-xl-9">
<p class="m-0">
COVID-19-Fälle: Robert-Koch-Institut (<a href="https://npgeo-corona-npgeo-de.hub.arcgis.com/">COVID-19 Datenhub</a>;
<a href="https://survstat.rki.de/">SurvStat@RKI 2.0</a> via <a href="https://coronavis.dbvis.de/">Coronavis</a>); Bevölkerungszahlen:
Statistische Ämter des Bundes und der Länder (<a href="https://www.regionalstatistik.de/link/statistikInfo/12411">Regionaldatenbank Deutschland</a>)
</p>
</dd>
<dt class="col-xl-3">Letzte Aktualisierung</dt>
<dd class="col-xl-9"><span id="lastUpdateDate">Samstag, 07. August 2021</span></dd>
<dt class="col-xl-3">Autor</dt>
<dd class="col-xl-9">Tobias Schächtelin (<a href="https://twitter.com/tschach">@tschach</a>)</dd>
<dt class="col-xl-3">Nutzungsbedingungen</dt>
<dd class="col-xl-9">
Die angezeigten Diagramme sind gemeinfrei und dürfen ohne Zustimmung oder Namensnennung zu privaten oder kommerziellen Zwecken kopiert, verändert
und verbreitet werden (<a href="https://creativecommons.org/publicdomain/zero/1.0/deed.de">CC-0-Lizenz</a>)
</dd>
</dl>
</header>
<hr class="offset-xl-2 col-xl-8">
<section class="pt-xl-4 pt-2 offset-xl-1 col-xl-10" id="controlContainer">
<label class="form-label">Art der Datenauswertung</label>
<div class="row">
<div class="col-lg-6">
<input type="radio" class="btn-check" name="heatmapversion" id="btnradio92" value="v1" checked="">
<label class="btn btn-sm btn-outline-secondary w-100 h-100 text-start" for="btnradio92">
Variante 1:<br>
• tagesaktuelle Inzidenzwerte 👍<br>
• grobe Einteilung der Altersgruppen (nach RKI)<br>
• Zeitraum auswählbar
</label>
</div>
<div class="col-lg-6 pt-lg-0 pt-2">
<input type="radio" class="btn-check" name="heatmapversion" id="btnradio91" value="v2">
<label class="btn btn-sm btn-outline-secondary w-100 h-100 text-start" for="btnradio91">
Variante 2 (neu):<br>
• wöchentliche Inzidenzwerte<br>
• detaillierte Altersgruppen für Kinder und Schüler*innen 👍 (eigene Einteilung)<br>
• kein Zeitraum auswählbar
</label>
</div>
</div>
<div class="row pt-xl-4 pt-2 was-validated">
<div class="col-lg-4">
<label for="landkreisSelect" class="form-label">Kreis oder Stadt</label>
<select id="landkreisSelect" class="form-select" disabled="" required="">
<option value="">Bitte auswählen</option>
</select>
</div>
<div class="col-lg-4 pt-lg-0 pt-2">
<label class="form-label">Zeitraum</label>
<div class="d-grid gap-1" role="group">
<input type="radio" class="btn-check" name="timeframe" id="btnradio1" value="all" checked="">
<label class="btn btn-sm btn-outline-secondary" for="btnradio1">Ganze Pandemie</label>
<input type="radio" class="btn-check" name="timeframe" id="btnradio2" value="oct2020">
<label class="btn btn-sm btn-outline-secondary" for="btnradio2">seit Oktober 2020</label>
<input type="radio" class="btn-check" name="timeframe" id="btnradio3" value="jan2021">
<label class="btn btn-sm btn-outline-secondary" for="btnradio3">seit Januar 2021</label>
<input type="radio" class="btn-check" name="timeframe" id="btnradio4" value="last28d">
<label class="btn btn-sm btn-outline-secondary" for="btnradio4">letzte 4 Wochen</label>
</div>
</div>
<div class="col-lg-4 pt-lg-0 pt-2">
<label class="form-label">Farbschema</label>
<div class="d-grid gap-1" role="group">
<input type="radio" class="btn-check" name="colorscheme" id="btnradio11" value="DEFAULT" checked="">
<label class="btn btn-sm btn-outline-secondary" for="btnradio11">Standard</label>
<input type="radio" class="btn-check" name="colorscheme" id="btnradio12" value="RKIHEATMAP">
<label class="btn btn-sm btn-outline-secondary" for="btnradio12">RKI-Heatmap</label>
<input type="radio" class="btn-check" name="colorscheme" id="btnradio13" value="PURPLEGREENYELLOW">
<label class="btn btn-sm btn-outline-secondary" for="btnradio13">Lila-Grün-Gelb</label>
</div>
</div>
</div>
<div class="row pt-4">
<div class="offset-lg-8 col-lg-4">
<div class="d-grid gap-1" role="group">
<button id="updateChartsButton" type="button" class="btn btn-sm btn-dark">
Diagramm anzeigen oder aktualisieren
</button>
</div>
</div>
</div>
</section>
<hr class="offset-xl-2 col-xl-8">
<section class="pt-xl-4 pt-2 pb-xl-4 pb-2" id="resultsContainer">
<div id="titleContainer" class=""><h2 class="offset-xl-1 col-xl-10 lead"> </h2></div>
<div id="canvasContainer" class="row-full" style="min-height:1rem;"></div>
<div id="legendContainer" class="mt-3 offset-xl-1 col-xl-10 text-muted"></div>
</section>
<hr class="offset-xl-2 col-xl-8">
<section class="pt-2 offset-xl-1 col-xl-10">
<p class="text-muted">
„Corona in den Altersgruppen“ ist inspiriert von <a href="https://semohr.github.io/risikogebiete_deutschland/">Risikogebiete Deutschland</a>,
<a href="https://rsalzer.github.io/COVID_19_AGE/">Corona-Fälle in der Schweiz nach Alter</a>,
<a href="https://api.corona-zahlen.org">Robert Koch-Institut API</a>,
<a href="https://www.designtagebuch.de/datenvisualisierung-deutschland-in-der-dritten-welle/">Datenvisualisierung: Deutschland in der dritten Welle</a>, <a href="https://corona7tage.herokuapp.com/">COVID-19 Neuinfektionen und Intensivfälle</a>,
<a href="https://corona-data.eu/">SARS-CoV2 Infektionsfälle als Heatmaps für Deutschland</a> und den Menschen hinter diesen Projekten. Neben vielen
Ideen habe ich auch den einen oder anderen Codeschnippsel und Daten daraus übernommen.
</p>
<p class="text-muted">
<a href="https://github.com/tschach/covaltvis">Quellcode und Datensätze</a>. Alle Angaben ohne Gewähr. Offensichtliche Fehler in den Daten gerne
melden.
</p>
</section>
</div>
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.2.1/dist/chart.min.js" crossorigin="anonymous" integrity="sha256-uVEHWRIr846/vAdLJeybWxjPNStREzOlqLMXjW/Saeo="></script>
<script src="https://cdn.jsdelivr.net/npm/moment@2.29.1/min/moment-with-locales.min.js" crossorigin="anonymous" integrity="sha256-E3Snwx6F4t7DiA/L3DgPk6In2M1747JSau+3PWjtS5I="></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-moment@1.0.0/dist/chartjs-adapter-moment.min.js" crossorigin="anonymous" integrity="sha256-sFB24K2xU2EOgWAtb3ySAGjhMqcUvUJGmwjDcTQa04k="></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-chart-matrix@1.0.0/dist/chartjs-chart-matrix.min.js" crossorigin="anonymous" integrity="sha256-w43uLVw/A/TkKTDQhKagsrexz+DmO/ziqAOor+PhW+Y="></script>
<script src="https://cdn.jsdelivr.net/npm/tom-select@1.7.7/dist/js/tom-select.complete.min.js" crossorigin="anonymous" integrity="sha256-i4MNYe1kbfMmQQ7cHCFS10T0cYTwXljQsbgqY0ItZeQ="></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script src="assets/app_test.js"></script>
</body></html>