-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
82 lines (81 loc) · 4.81 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
<!doctype html>
<html lang="en">
<head>
<title>Scot COVID-19 Heatmap</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.3.1/css/ol.css"
type="text/css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<a href="https://github.com/hunt3ri/scot-covid19-heatmap" class="github-corner" aria-label="View source on GitHub"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#151513; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>
<div class="container" id="app">
<div class="row ">
<div class="col-lg-9 col-md-12 ml-0 pl-0 mr-0 pr-0">
<div id="map" class="map"></div>
</div>
<div class="col-3 d-none d-lg-block">
<h6>Top 20 Locations</h6>
<table class="table table-bordered table-sm">
<tr>
<th>Location</th>
<th>Deaths</th>
</tr>
<tr v-for="location in locations.slice(0,20)">
<td>{{location.place}}</td>
<td>{{location.deaths}}</td>
</tr>
</table>
</div>
</div>
<div class="row">
<div class="col-12">
<h6>COVID-19 Related Deaths in Scotland</h6>
</div>
</div>
<div class="row">
<div class="col-sm-12 col-md-9">
<form>
<input v-model="selectedWeek" @change="weekHandler(selectedWeek)" type="range" min="1" max="20" step="1" value="1"/>
<label id="weekLbl">{{ message }}</label>
</form>
</div>
<div class="col-sm-10 col-md-3 alert alert-primary" role="alert">
<strong>Scroll slider to progress</strong>
</div>
</div>
<div class="row pt-4">
<div class="col-12">
<h5>Limitations</h5>
<p>Heatmap gives an overall sense of progress against covid, however, accuracy is limited by the source
dataset. Eg
all deaths in Highlands are limited to just one point. Any errors are authors own</p>
</div>
</div>
<div class="row">
<div class="col-sm-12 col-md-6">
<h5>About</h5>
<p>Created by <a href="https://www.linkedin.com/in/hunteriain/">Iain Hunter</a></p>
<p>Data sourced from:
<a href="https://statistics.gov.scot/resource?uri=http%3A%2F%2Fstatistics.gov.scot%2Fdata%2Fdeaths-involving-coronavirus-covid-19">
statistics.gov.scot
</a></p>
</div>
<div class="col-sm-12 col-md-6">
<a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/"><img
alt="Creative Commons License"
style="border-width:0"
src="https://i.creativecommons.org/l/by-nc-sa/4.0/88x31.png"/></a><br/>This
work is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/">Creative
Commons
Attribution-NonCommercial-ShareAlike 4.0 International License</a>.
</div>
</div>
</div>
<script type="text/javascript" src="app/covid.ts"></script>
</body>
</html>