-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
142 lines (127 loc) · 5.14 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
<!DOCTYPE html>
<html>
<head>
<style>
body {
color: #FFFFFF;
background-color: #000001;
}
button {
border-color: #888888;
color: #fff;
border-radius: 8px;
}
.grid-container {
display: grid;
grid-template-columns: repeat(77, 20px);
width: 1560px;
grid-template-rows: repeat(36, 20px);
margin-right: auto;
margin-left: auto;
}
.grid-container>div {
text-align: center;
padding: 5px;
font-size: 10px;
}
.tip {
visibility: hidden;
position: relative;
z-index: 1;
background-color: purple;
color: #fff;
text-align: center;
border-radius: 4px;
padding: 6px 6px;
margin-left: 8px;
margin-top: 8px;
white-space: nowrap;
}
.explanation {
background-color: green;
padding: 20px;
font-size: 30px;
max-width: 800px;
margin-right: auto;
margin-left: auto;
border-radius: 8px;
}
.footer {
background-color: brown;
padding: 20px;
font-size: 30px;
max-width: 800px;
margin-right: auto;
margin-left: auto;
border-radius: 8px;
}
</style>
</head>
<body>
<hr style="margin-left: auto; margin-right: auto; display:block;">
<div style="margin-left: auto; margin-right: auto; text-align:center; align-items:center; justify-content:center;">
<h1>Canadian Ridings Cartogram</h1>
<hr />
<p>Each dot represents one electoral district</p>
</div>
<div style="margin-left: auto; margin-right: auto; text-align:center; align-items:center; justify-content:center;">
<div class="grid-container" id="map">
</div>
</div>
<hr />
<div class="explanation" style=>
<p>
Canadian electoral districts (ridings) dramatically vary in area, and are
distributed very unevenly around the country. There's also a large urban
popluation with very small area districts. Showing them on a normal map
like this <a href="https://www.elections.ca/res/cir/maps2/images/ERMap_43.pdf">elections
canada map</a> gives too much attention to large rural districts like Nunavut, while
making it very difficult to see how urban districts voted.
</p>
<p>
One way to improve the map is to build a cartogram, where the electoral
data is layed out as a map. There have been lots of good attempts at this
including <a href="https://upload.wikimedia.org/wikipedia/commons/f/fd/Canadian_Federal_Election_Cartogram_2019.svg">
this from wikipedia</a>,
<a href="https://electoralcartogram.ca/"> this from electoralcartogram.ca</a> and
<a href="https://attaboy.ca/images/misc/canada-map-by-riding-large.png"> this from attaboy.ca</a>.
All of them give an equal area to every riding, which gives urban ridings
the same weight as rural ridings.
</p>
<p>
The issue with cartograms is that they distort the geography, and can make
it hard to identify where each riding is actually located. Areas like
northern ontario get squeezed down while the area around Toronto get
stretched to fill most of southern Ontario. Another big issue is it
becomes very hard to tell apart urban and rural ridings. If you're
unfamiliar with a riding's name the map can't tell you whether it's part of
a city, a suburb, or fully rural.
</p>
<p>
My map attempts to bridge the divide between the two. Unlike a geographic
map, each riding gets exactly 1 dot on the map. There is some distortion
to make cities larger and some unpopulated areas smaller (sorry
territories). But unlike a normal cartogram I have kept the distinction
between rural and urban spaces. Black areas represent major cities, with
Grey areas marking greater metro areas. Dots are orthogonally adjacent if
they are part of the same urban area, and are otherwise separated. For
very large ridings I've tried to place the dot somewhere near the largest
population centers, but also those dots are more separated from their
neighbors.
</p>
</div>
<hr />
<div class="footer">
<p>
Thanks for taking a look. If you want to see the code it's on
<a href="http://www.github.com/aberkan/ridings">github</a>
and if you want to follow me in case I build more cool things I'm on
<a href="http://www.twitter.com/berkan">twitter</a>
</p>
</div>
<script src="land.js"></script>
<script src="results_2021.js"></script>
<script src="data.js"></script>
<script src="ridings.js"></script>
</body>
</html>