Skip to content

Instantly share code, notes, and snippets.

@jessihamel

jessihamel/index.html

Last active March 17, 2017 19:05
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jessihamel/93945a6a5a250bea693d31a65410bcbb to your computer and use it in GitHub Desktop.
Save jessihamel/93945a6a5a250bea693d31a65410bcbb to your computer and use it in GitHub Desktop.
Download ZIP
germany_tilegram_example
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
path {
stroke: black;
}
.party-1 {
fill: red;
}
.party-2 {
fill: blue;
}
.party-3 {
fill: purple;
}
</style>
<body>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script type="text/javascript" src="http://d3js.org/topojson.v2.min.js"></script>
<script>
var WIDTH = 500
var HEIGHT = 500
var svg = d3.select('body').append('svg')
.attr('width', WIDTH)
.attr('height', HEIGHT)
d3.queue()
.defer(d3.json, 'tiles.topo.json')
.defer(d3.csv, 'results.csv')
.await(ready)
function ready(error, tilegram, results) {
if (error) throw error
// convert results to hash for quick lookup
results = results.reduce(function (a, b) {
a[b.geoId] = b.party
return a
}, {})
var tiles = topojson.feature(tilegram, tilegram.objects.tiles)
var transform = d3.geoTransform({
point: function(x, y) {
this.stream.point(x, -y)
},
})
var path = d3.geoPath().projection(transform)
var g = svg.append('g')
.attr('transform', 'translate(' + -WIDTH / 8 + ',' + HEIGHT + ')scale(0.5)')
g.selectAll('.tiles')
.data(tiles.features)
.enter().append('path')
.attr('d', path)
.attr('class', function(d) { return 'party-' + results[d.id] })
}
</script>
</body>
Raw
results.csv
geoId party
1 1
2 3
3 3
4 3
5 1
6 2
7 1
8 1
9 3
10 3
11 3
12 1
13 2
14 3
15 1
16 2
17 2
18 2
19 2
20 3
21 3
22 2
23 2
24 1
25 3
26 3
27 3
28 3
29 1
30 1
31 1
32 2
33 3
34 3
35 1
36 2
37 1
38 1
39 1
40 3
41 1
42 1
43 1
44 2
45 2
46 1
47 2
48 2
49 2
50 1
51 3
52 3
53 2
54 1
55 3
56 3
57 3
58 3
59 2
60 1
61 3
62 3
63 1
64 3
65 1
66 3
67 2
68 3
69 1
70 1
71 3
72 2
73 1
74 1
75 2
76 3
77 1
78 1
79 2
80 3
81 1
82 1
83 2
84 1
85 1
86 1
87 2
88 3
89 2
90 1
91 2
92 2
93 1
94 1
95 1
96 3
97 2
98 1
99 2
100 2
101 3
102 2
103 1
104 2
105 1
106 3
107 3
108 2
109 2
110 3
111 3
112 2
113 3
114 2
115 3
116 2
117 3
118 3
119 1
120 3
121 1
122 1
123 1
124 2
125 2
126 1
127 1
128 3
129 3
130 2
131 3
132 2
133 1
134 1
135 2
136 1
137 2
138 3
139 1
140 3
141 2
142 3
143 2
144 2
145 2
146 3
147 3
148 3
149 3
150 1
151 2
152 3
153 2
154 1
155 1
156 3
157 1
158 2
159 3
160 2
161 3
162 1
163 1
164 3
165 2
166 3
167 1
168 2
169 3
170 1
171 1
172 1
173 2
174 3
175 1
176 2
177 1
178 1
179 2
180 3
181 3
182 1
183 3
184 2
185 2
186 1
187 3
188 2
189 2
190 3
191 1
192 2
193 1
194 1
195 3
196 2
197 2
198 3
199 1
200 2
201 2
202 1
203 2
204 1
205 2
206 3
207 2
208 3
209 2
210 1
211 3
212 2
213 3
214 3
215 1
216 2
217 3
218 2
219 3
220 2
221 3
222 1
223 3
224 3
225 1
226 2
227 1
228 2
229 1
230 1
231 3
232 1
233 3
234 2
235 1
236 2
237 2
238 2
239 2
240 3
241 3
242 3
243 2
244 1
245 1
246 3
247 2
248 2
249 3
250 1
251 2
252 1
253 2
254 2
255 2
256 1
257 3
258 2
259 2
260 3
261 2
262 3
263 3
264 2
265 2
266 1
267 3
268 3
269 3
270 1
271 3
272 1
273 3
274 3
275 2
276 1
277 1
278 1
279 1
280 2
281 2
282 3
283 2
284 3
285 2
286 1
287 3
288 3
289 1
290 1
291 2
292 3
293 3
294 3
295 2
296 3
297 3
298 2
299 2
Display the source blob
Display the rendered blob
Raw
tiles.topo.json
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment