This repository has been archived by the owner on May 2, 2023. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
274 lines (269 loc) · 13.4 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
<html>
<head>
<title>Leeds ward map</title>
<style>
html { height: 100%; }
body { font-family: sans-serif; margin: 0px; padding: 0px; background-color: white; text-align: center; height: 100%; width: 100%; justify-content: center; }
h1 { display: block; margin: 0px; }
.mapholder {
background: #f9f9f9;
padding: 1em;
}
.hexmap {
list-style: none;
margin: 0px;
padding: 0px;
border-color: red;
font-size: 2em;
}
.hexmap .hextile {
margin-top: 0em;
margin-left: 0.7em;
margin-right: 0.7em;
margin-bottom: 0em;
width: 1.4em;
background-color: #efefef;
position: absolute;
float: left;
line-height: 2.2em;
height: 2.4em;
text-align: center;
font-family: monospace, sans-serif;
opacity: 1;
transition: all 1s linear;
box-sizing: border-box;
}
.hexmap .hextile:before {
content: " ";
width: 0; height: 0;
border-color: inherit;
border-left: 0px;
border-right: 0.7em solid #efefef;
border-top: 1.2em solid transparent!important;
border-bottom: 1.2em solid transparent!important;
position: absolute;
right: 1.4em;
}
.hexmap .hextile:after {
content: "";
width: 0;
position: absolute;
left: 1.4em;
border-color: transparent;
border-right: 0px;
border-left: 0.7em solid #efefef;
border-top: 1.2em solid transparent!important;
border-bottom: 1.2em solid transparent!important;
top:0em;
z-index: 1;
}
.hexmap a.hex { color: inherit; text-decoration: none; }
.hexmap .hextile,
.hexmap .hextile:before,
.hexmap .hextile:after {
transition: all 0.5s linear;
}
.hexmap .hextile > .hex {
overflow: hidden;
line-height: 1em;
margin: 0.2em 0.1em;
width: 1.2em;
height: 2em;
text-align: center;
box-sizing: border-box;
position: absolute;
left: 0px;
}
.hexmap .hextile:hover > .hex, .hexmap .hextile.hover > .hex, .hexmap .hextile > .hex:focus {
overflow: visible;
display: inline-block;
white-space: nowrap;
background: black;
width: auto;
margin: 0px;
padding: 0.2em 0.1em;
padding-right: 0.5em;
z-index: 100;
line-height: 2em;
height: 2.4em;
color: white;
}
.hexmap .hextile:hover > .hex:before, .hexmap .hextile.hover > .hex:before, .hexmap .hextile .hex:focus:before {
content: " ";
width: 0; height: 0;
border-color: inherit;
border-left: 0px;
border-right: 0.7em solid black;
border-top: 1.2em solid transparent!important;
border-bottom: 1.2em solid transparent!important;
position: absolute;
left: -0.7em;
top:0px;
}
.hexmap .hextile .hex .hexcontent {
text-align: center;
}
.hexmap .hextile:hover .hex .hexcontent, .hexmap .hextile.hover .hex .hexcontent, .hexmap .hextile .hex:focus .hexcontent {
line-height: 1em;
text-align: left;
}
.hexmap .hex .n {
display: block;
font-size: 0.7em;
}
.hexmap .hex .name {
font-size: 0.4em;
text-align: left;
white-space: nowrap;
}
.hexmap .hextile:hover .hex .name, .hexmap .hextile.hover .hex .name, .hexmap .hextile .hex:focus .name {
text-align: left;
}
/* Deal with right-aligned hex content */
.hexmap .hextile:hover > .hex.hexright, .hexmap .hextile.hover > .hex.hexright, .hexmap .hextile > .hex.hexright:focus {
position: absolute;
left: auto;
right: 0px;
}
.hexmap .hextile:hover > .hex.hexright:before, .hexmap .hextile.hover > .hex.hexright:before, .hexmap .hextile > .hex.hexright:focus:before {
border: 0px;
}
.hexmap .hextile:hover > .hex.hexright:after, .hexmap .hextile.hover > .hex.hexright:after, .hexmap .hextile > .hex.hexright:focus:after {
content: " ";
width: 0; height: 0;
border-color: inherit;
border-right: 0px;
border-left: 0.7em solid black;
border-top: 1.2em solid transparent!important;
border-bottom: 1.2em solid transparent!important;
position: absolute;
right: -0.692em;
top:0px;
}
.hexmap .hextile:hover > .hex.hexright, .hexmap .hextile.hover > .hex.hexright, .hexmap .hextile > .hex.hexright:focus {
padding: 0.2em 0.1em;
padding-left: 0.5em;
}
ul.key {
list-style: none;
}
ul.key li {
display: inline-block;
width: auto;
position: relative;
padding: 0.2em;
margin-right: 0.2em;
}
.hexmap {
position: relative;
height: 18.75em;
width: 16.25em;
margin: auto;
}
li { position: absolute; }
.r-1 { bottom: 0em; }
.r-2 { bottom: 2.5em; }
.r-3 { bottom: 5em; }
.r-4 { bottom: 7.5em; }
.r-5 { bottom: 10em; }
.r-6 { bottom: 12.5em; }
.r-7 { bottom: 15em; }
.r-8 { bottom: 17.5em; }
.r-9 { bottom: 20em; }
.r-10 { bottom: 22.5em; }
.r-11 { bottom: 25em; }
.r-12 { bottom: 27.5em; }
.r-13 { bottom: 30em; }
.c-1 { left: 0em; }
.c-2 { left: 2.25em; margin-bottom: 1.25em!important; }
.c-3 { left: 4.5em; }
.c-4 { left: 6.75em; margin-bottom: 1.25em!important; }
.c-5 { left: 9em; }
.c-6 { left: 11.25em; margin-bottom: 1.25em!important; }
.c-7 { left: 13.5em; }
.c-8 { left: 15.75em; margin-bottom: 1.25em!important; }
p {
text-align: left;
margin: 1em auto;
}
code {
color: #02a24b;
}
select {
font-size: 1em;
}
input.error {
background-color: red;
}
.header {
display: block;
padding: 1em;
background-color: #dfdfdf;
text-align: left;
}
form { margin: 0px; }
#customise { margin-bottom: 1em; }
#config { float: right; font-size: 2em; text-decoration: none;}
.hide { display: none; }
</style>
<script src="hexmap.js" type="text/javascript"></script>
</head>
<body>
<form action="?" method="GET">
<div class="header">
<a id="config" href="#setup">↵</a>
<h1>Leeds Ward Data: <span class="value_title"></span></h1>
<div id="setup">
<p>Display ward data from a dataset on the <a href="http://leedsdatamill.org/dataset/">Leeds Data Mill</a> as a hexagon tile map.</p>
<label for="key">Leeds Data Mill Database ID</label><input type="text" name="ID" id="ID" placeholder="e.g. fa7674ce-1cec-4650-9ceb-9b3afe43f742"></input>
<label for="ward">Ward column title</label><input type="text" name="ward" id="ward" placeholder="e.g. Ward"></input>
<label for="categories">Category column title</label><input type="text" name="categories" id="categories" placeholder="e.g. Incident Type"></input>
<label for="colour">Colour</label><input type="text" name="colour" id="colour" placeholder="e.g. rgba(246, 136, 31)"></input>
<input type="submit"></input>
</div>
</div>
<div class="mapholder">
<div id="customise">
<label for="category">Category to display</label>
<select id="category"></select>
</div>
<ol class="hexmap">
<li class="E05001437 OTLEY_AND_YEADON r-7 c-3 hextile"><a href="#" class="hex"><div class="hexcontent"><span class="name" title="Otley and Yeadon">Otley and Yeadon</span><span class="n"></span></div></a></li>
<li class="E05001411 ADEL_AND_WHARFEDALE r-7 c-4 hextile"><a href="#" class="hex"><div class="hexcontent"><span class="name" title="Adel and Wharfedale">Adel and Wharfedale</span><span class="n"></span></div></a></li>
<li class="E05001412 ALWOODLEY r-7 c-5 hextile"><a href="#" class="hex"><div class="hexcontent"><span class="name" title="Alwoodley">Alwoodley</span><span class="n"></span></div></a></li>
<li class="E05001425 GUISELEY_AND_RAWDON r-6 c-2 hextile"><a href="#" class="hex"><div class="hexcontent"><span class="name" title="Guiseley and Rawdon">Guiseley and Rawdon</span><span class="n"></span></div></a></li>
<li class="E05001428 HORSFORTH r-6 c-3 hextile"><a href="#" class="hex"><div class="hexcontent"><span class="name" title="Horsforth">Horsforth</span><span class="n"></span></div></a></li>
<li class="E05001442 WEETWOOD r-6 c-4 hextile"><a href="#" class="hex"><div class="hexcontent"><span class="name" title="Weetwood">Weetwood</span><span class="n"></span></div></a></li>
<li class="E05001434 MOORTOWN r-6 c-5 hextile"><a href="#" class="hex"><div class="hexcontent"><span class="name" title="Moortown">Moortown</span><span class="n"></span></div></a></li>
<li class="E05001426 HAREWOOD r-6 c-6 hextile"><a href="#" class="hex hexright"><div class="hexcontent"><span class="name" title="Harewood">Harewood</span><span class="n"></span></div></a></li>
<li class="E05001443 WETHERBY r-6 c-7 hextile"><a href="#" class="hex hexright"><div class="hexcontent"><span class="name" title="Wetherby">Wetherby</span><span class="n"></span></div></a></li>
<li class="E05001438 PUDSEY r-5 c-1 hextile"><a href="#" class="hex"><div class="hexcontent"><span class="name" title="Pudsey">Pudsey</span><span class="n"></span></div></a></li>
<li class="E05001418 CALVERLEY_AND_FARSLEY r-5 c-2 hextile"><a href="#" class="hex"><div class="hexcontent"><span class="name" title="Calverley and Farsley">Calverley and Farsley</span><span class="n"></span></div></a></li>
<li class="E05001432 KIRKSTALL r-5 c-3 hextile"><a href="#" class="hex"><div class="hexcontent"><span class="name" title="Kirkstall">Kirkstall</span><span class="n"></span></div></a></li>
<li class="E05001427 HEADINGLEY r-5 c-4 hextile"><a href="#" class="hex"><div class="hexcontent"><span class="name" title="Headingley">Headingley</span><span class="n"></span></div></a></li>
<li class="E05001419 CHAPEL_ALLERTON r-5 c-5 hextile"><a href="#" class="hex"><div class="hexcontent"><span class="name" title="Chapel Allerton">Chapel Allerton</span><span class="n"></span></div></a></li>
<li class="E05001440 ROUNDHAY r-5 c-6 hextile"><a href="#" class="hex hexright"><div class="hexcontent"><span class="name" title="Roundhay">Roundhay</span><span class="n"></span></div></a></li>
<li class="E05001421 CROSS_GATES_AND_WHINMOOR r-5 c-7 hextile"><a href="#" class="hex hexright"><div class="hexcontent"><span class="name" title="Cross Gates and Whinmoor">Cross Gates and Whinmoor</span><span class="n"></span></div></a></li>
<li class="E05001416 BRAMLEY_AND_STANNINGLEY r-4 c-2 hextile"><a href="#" class="hex"><div class="hexcontent"><span class="name" title="Bramley and Stanningley">Bramley and Stanningley</span><span class="n"></span></div></a></li>
<li class="E05001414 ARMLEY r-4 c-3 hextile"><a href="#" class="hex"><div class="hexcontent"><span class="name" title="Armley">Armley</span><span class="n"></span></div></a></li>
<li class="E05001429 HYDE_PARK_AND_WOODHOUSE r-4 c-4 hextile"><a href="#" class="hex"><div class="hexcontent"><span class="name" title="Hyde Park and Woodhouse">Hyde Park and Woodhouse</span><span class="n"></span></div></a></li>
<li class="E05001424 GIPTON_AND_HAREHILLS r-4 c-5 hextile"><a href="#" class="hex"><div class="hexcontent"><span class="name" title="Gipton and Harehills">Gipton and Harehills</span><span class="n"></span></div></a></li>
<li class="E05001430 KILLINGBECK_AND_SEACROFT r-4 c-6 hextile"><a href="#" class="hex hexright"><div class="hexcontent"><span class="name" title="Killingbeck and Seacroft">Killingbeck and Seacroft</span><span class="n"></span></div></a></li>
<li class="E05001422 FARNLEY_AND_WORTLEY r-3 c-2 hextile"><a href="#" class="hex"><div class="hexcontent"><span class="name" title="Farnley and Wortley">Farnley and Wortley</span><span class="n"></span></div></a></li>
<li class="E05001415 BEESTON_AND_HOLBECK r-3 c-3 hextile"><a href="#" class="hex"><div class="hexcontent"><span class="name" title="Beeston and Holbeck">Beeston and Holbeck</span><span class="n"></span></div></a></li>
<li class="E05001420 CITY_AND_HUNSLET r-3 c-4 hextile"><a href="#" class="hex"><div class="hexcontent"><span class="name" title="City and Hunslet">City and Hunslet</span><span class="n"></span></div></a></li>
<li class="E05001417 BURMANTOFTS_AND_RICHMOND_HILL r-3 c-5 hextile"><a href="#" class="hex hexright"><div class="hexcontent"><span class="name" title="Burmantofts and Richmond Hill">Burmantofts and Richmond Hill</span><span class="n"></span></div></a></li>
<li class="E05001441 TEMPLE_NEWSAM r-3 c-6 hextile"><a href="#" class="hex hexright"><div class="hexcontent"><span class="name" title="Temple Newsam">Temple Newsam</span><span class="n"></span></div></a></li>
<li class="E05001431 KIPPAX_AND_METHLEY r-3 c-7 hextile"><a href="#" class="hex hexright"><div class="hexcontent"><span class="name" title="Kippax and Methley">Kippax and Methley</span><span class="n"></span></div></a></li>
<li class="E05001435 MORLEY_NORTH r-2 c-2 hextile"><a href="#" class="hex"><div class="hexcontent"><span class="name" title="Morley North">Morley North</span><span class="n"></span></div></a></li>
<li class="E05001436 MORLEY_SOUTH r-2 c-3 hextile"><a href="#" class="hex"><div class="hexcontent"><span class="name" title="Morley South">Morley South</span><span class="n"></span></div></a></li>
<li class="E05001433 MIDDLETON_PARK r-2 c-4 hextile"><a href="#" class="hex"><div class="hexcontent"><span class="name" title="Middleton Park">Middleton Park</span><span class="n"></span></div></a></li>
<li class="E05001439 ROTHWELL r-2 c-5 hextile"><a href="#" class="hex"><div class="hexcontent"><span class="name" title="Rothwell">Rothwell</span><span class="n"></span></div></a></li>
<li class="E05001423 GARFORTH_AND_SWILLINGTON r-2 c-6 hextile"><a href="#" class="hex hexright"><div class="hexcontent"><span class="name" title="Garforth and Swillington">Garforth and Swillington</span><span class="n"></span></div></a></li>
<li class="E05001413 ARDSLEY_AND_ROBIN_HOOD r-1 c-4 hextile"><a href="#" class="hex"><div class="hexcontent"><span class="name" title="Ardsley and Robin Hood">Ardsley and Robin Hood</span><span class="n"></span></div></a></li>
<li class="LEEDS r-1 c-1 hextile"><a href="#" class="hex"><div class="hexcontent"><span class="name" title="Leeds">Leeds</span><span class="n"></span></div></a></li>
</ol>
</div>
</form>
</body>
</html>