-
Notifications
You must be signed in to change notification settings - Fork 2
/
map.html
233 lines (192 loc) · 12.4 KB
/
map.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
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<meta name='description' content='Interactive Map'>
<meta name='author' content='Spider Cartographers'>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no'/>
<link rel='stylesheet' type='text/css' href='assets/css/style.css'/>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js'></script>
<script src='https://api.mapbox.com/mapbox-gl-js/v1.10.0/mapbox-gl.js'></script>
<link href='https://api.mapbox.com/mapbox-gl-js/v1.10.0/mapbox-gl.css' rel='stylesheet' />
<script src='https://d3js.org/d3.v5.js'></script>
<!-- <script src='https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js'></script> -->
<script src='https://www.gstatic.com/firebasejs/7.14.2/firebase-app.js'></script>
<script src='https://www.gstatic.com/firebasejs/7.14.2/firebase-analytics.js'></script>
<script src='https://www.gstatic.com/firebasejs/7.14.2/firebase-database.js'></script>
<script src='http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js' type='text/javascript'></script>
</head>
<body>
<!-- MAPBOX GEOCODER FOR SEARCH BAR -->
<script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.5.1/mapbox-gl-geocoder.min.js'></script>
<link rel='stylesheet' href='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.5.1/mapbox-gl-geocoder.css' type='text/css' />
<body id='map'>
<!-- WELCOME POP UP BOX -->
<div id='blur_out'></div>
<div id='popup_box'>
<h1>Welcome!</h1>
<p>If you've come here first, we recommend that you read the <a href='story.html'>story</a> before exploring the map.</p>
<p>If you've already read the story, get ready to explore the transport characteristics of MSOAs in England and Wales!
<strong>Click</strong> on an MSOA to view the breakdown of how people in this MSOA commute to work. After selecting an MSOA, use the
<strong>last switch</strong> in the sidebar to see where people who live in this MSOA work, and how they get there!</p>
<a id='popupBoxClose'>
<div id='popupBoxCloseButton'>
<p>Let's go!</p>
</div>
</a>
</div>
<!-- FLOWS - MORE INFO POP UP BOX -->
<div id='flowsInfoPopup'>
<h3>Commuting Flows</h3>
<p>Turning on this switch will display data about where people who live in the selected MSOA go for work. This data is represented
as flows, or lines, where the color indicates the transportation mode used and the thickness reflects how many people commute between
the residence MSOA and the workplace MSOA using a given mode. The visualization excludes flows of less than 5 people.</p>
<a id='flowsInfoPopupBoxClose'>
<div id='flowsInfoPopupBoxCloseButton'>
<p>X</p>
</div>
</a>
</div>
<!-- CLUSTERS - MORE INFO POP UP BOX -->
<div id='clustersInfoPopup'>
<h3>High public transport and good accessibility</h3>
<p>This cluster is associated with high usage of public transport including the underground/metro/tram, train and bus.
It has very good accessibility to all MSOAs through all transport modes, meaning that people in this MSOA can easily
move around. MSOAs that are in the highly accessible centres of large cities tend to fall into this cluster.</p>
<h3>Car reliant but high public transport </h3>
<p>This cluster has high car usage but is notable for the large number of people who use the bus and walk to work. MSOAs
in this cluster also have a high degree of accessibility, but the overall transport profile is more shifted towards cars
than the previous cluster. This cluster is found in large urban areas across England and Wales.</p>
<h3>Good train accessibility but car dependent</h3>
<p>This cluster is composed of rural MSOAs that surround land-locked urban areas. The MSOAs in this clusters benefit from
being on train routes, but that is the only mode of public transport by which they are serviced. As a result, the cluster
is associated with high car ownership and usage, followed by train and walking.</p>
<h3>Solely car dependent</h3>
<p>This cluster is made up of rural areas far from the cities. The MSOAs in this cluster have no public transport options and
people depend on cars to move around. They have poor accessibility even by car, which could be due to a lack of direct road
connections to other parts of the country.</p>
<h3>Lack of accessibility across all transport modes </h3>
<p>This cluster shows the third highest usage of bus, bicycle and walking to work. However, it has the lowest train usage and all
around accessibility, which is its defining feature. This cluster can be found in coastal towns and cities, which might suggest
they are at the end of train lines and other transport networks, and therefore lack connectivity.</p>
<a id='clustersInfoPopupBoxClose'>
<div id='clustersInfoPopupBoxCloseButton'>
<p>X</p>
</div>
</a>
</div>
<!-- MAP SIDEBAR -->
<div id='map_sidebar'>
<!-- burger menu -->
<div class='nav-toggle'>
<div class='nav-toggle-bar'></div>
</div>
<nav class='nav'>
<ul>
<li><a href='index.html'>home</a></li>
<li><a href='story.html'>story</a></li>
<li><a href='map.html'>map</a></li>
<li><a href='about.html'>about</a></li>
</ul>
</nav>
<!-- msoa info and chart -->
<p class='sidebarSubtitle'>Choose an MSOA:</p>
<div class='msoaInfo'>
<div class='msoaInfoText'><strong>MSOA Name:</strong> <span id='msoaName'></span></div>
<div class='msoaInfoText'><strong>Cluster:</strong> <span id='clusterNumber'></span></div>
<div class='msoaInfoText'><strong>How do people commute?</strong> <span id='msoaName'></span></div>
<div class='interactiveChart'>
<script type='module' src='assets/scripts/mapScripts/mapBoxChart.js'></script>
</div>
</div>
<!-- cluster console -->
<div id='clusterConsole'>
<div class='infoButtonAlignment'>
<p class='sidebarSubtitle'>Choose clusters:</p>
<div id='clustersMoreInfo'>
<p id='clustersMoreInfo_p'>i</p>
</div>
</div>
<div class='cluster1'>
<div class='onoffswitchCluster1'>
<input type='checkbox' name='onoffswitchCluster1' class='onoffswitchCluster1-checkbox' id='myonoffswitchCluster1' checked='checked'>
<label class='onoffswitchCluster1-label' for='myonoffswitchCluster1'></label>
</div>
<p class='clusterLabel'>High public transport and good accessibility</p>
</div>
<div class='cluster2'>
<div class='onoffswitchCluster2'>
<input type='checkbox' name='onoffswitchCluster2' class='onoffswitchCluster2-checkbox' id='myonoffswitchCluster2' checked='checked'>
<label class='onoffswitchCluster2-label' for='myonoffswitchCluster2'></label>
</div>
<p class='clusterLabel'>Car reliant but high public transport</p>
</div>
<div class='cluster3'>
<div class='onoffswitchCluster3'>
<input type='checkbox' name='onoffswitchCluster3' class='onoffswitchCluster3-checkbox' id='myonoffswitchCluster3' checked='checked'>
<label class='onoffswitchCluster3-label' for='myonoffswitchCluster3'></label>
</div>
<p class='clusterLabel'>Good train accessibility but car dependant</p>
</div>
<div class='cluster4'>
<div class='onoffswitchCluster4'>
<input type='checkbox' name='onoffswitchCluster4' class='onoffswitchCluster4-checkbox' id='myonoffswitchCluster4' checked='checked'>
<label class='onoffswitchCluster4-label' for='myonoffswitchCluster4'></label>
</div>
<p class='clusterLabel'>Soley car dependant</p>
</div>
<div class='cluster5'>
<div class='onoffswitchCluster5'>
<input type='checkbox' name='onoffswitchCluster5' class='onoffswitchCluster5-checkbox' id='myonoffswitchCluster5' checked='checked'>
<label class='onoffswitchCluster5-label' for='myonoffswitchCluster5'></label>
</div>
<p class='clusterLabel'>Lack of accessibility across all transport modes</p>
</div>
</div>
<!-- flows switch and info -->
<div class='infoButtonAlignment'>
<div id='flowButtonLabel' class='sidebarInstructions'><p class='sidebarSubtitle'>View where people work:</p></div>
<div id='flowsMoreInfo'>
<p id='flowsMoreInfo_p'>i</p>
</div>
</div>
<div class='flowsSwitch'>
<div class='onoffswitchFlows'>
<input type='checkbox' name='onoffswitchFlows' class='onoffswitchFlows-checkbox' id='myonoffswitchFlows' autocomplete='off'>
<label class='onoffswitchFlows-label' for='myonoffswitchFlows'></label>
</div>
</div>
<!-- data source information -->
<div class='DataSources'>
<div class ='DataSourcesText'>
<h4>Data Sources</h4>
<a href='https://opendata.arcgis.com/datasets/29fdaa2efced40378ce8173b411aeb0e_2.geojson'>ArcGIS </a>
<a href='https://www.ons.gov.uk/peoplepopulationandcommunity/populationandmigration/populationestimates/datasets/middlesuperoutputareamidyearpopulationestimates'>ONS </a>
<a href='https://www.ons.gov.uk/employmentandlabourmarket/peopleinwork/earningsandworkinghours/datasets/smallareaincomeestimatesformiddlelayersuperoutputareasenglandandwales'>ONS(2) </a>
<a href='https://www.nomisweb.co.uk/census/2011/quick_statistics'>NOMIS </a>
<a href='https://www.nomisweb.co.uk/census/2011/bulk/rOD1'>NOMIS(2) </a>
<a href='https://data.gov.uk/dataset/ff93ffc1-6656-47d8-9155-85ea0b8f2251/national-public-transport-access-nodes-naptan'>GOV.UK</a>
</div>
</div>
</div> <!-- end of sidebar div -->
<!-- FLOWS LEGEND -->
<div id='flowsLegend'>
<img src='assets/images/flowsLegend.png' alt='Flows Legend'>
</div>
<!-- FLOWS POPUP INFO -->
<div id='flowsPopup'>
<div class='flowsText'><strong>Residence MSOA: </strong><span id='flowOrigin'></span></div>
<div class='flowsText'><strong>Workplace MSOA: </strong><span id='flowDest'></span></div>
<div class='flowsText'><strong>Mode: </strong><span id='flowMode'></span></div>
<div class='flowsText'><strong>Number of people: </strong><span id='flowVolume'></span></div>
</div>
<!-- MAPBOX MAP -->
<div id='map_container'></div>
<!-- SCRIPTS w-->
<script type='module' src='assets/scripts/mapScripts/map.js'></script>
<script type='module' src='assets/scripts/mapScripts/welcome_popup.js'></script>
<script type='module' src='assets/scripts/mapScripts/clusters_info_popup.js'></script>
<script type='module' src='assets/scripts/mapScripts/flows_info_popup.js'></script>
<script type='module' src='assets/scripts/generalScripts/burgermenu.js'></script>
</body>
</html>