-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
executable file
·522 lines (479 loc) · 19.7 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
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<title>The Many Modalities of Making Marks on a Map</title>
<link href="inspire.css" rel="stylesheet" />
<link href="theme.css" rel="stylesheet" />
<link href="talk.css" rel="stylesheet" />
<!-- <link href="plugins/prism/plugin.css" rel="stylesheet" /> -->
</head>
<body class="language-markup" data-prism-plugins="normalize-whitespace">
<header id="intro" class="slide">
<h1>The Many Modalities of Making Marks on a Map</h1>
<p class="attribution">By <a href="http://thecristen.net">Cristen Jones</a>, Maptime Boston</p>
</header>
<section>
<header class="slide">
<h1>So you decided to make a map...</h1>
</header>
<article class="slide">
<h1>You probably want a map when</h1>
<p><strong>precise locations</strong> or <strong>geographical patterns in data</strong> are more important than anything else</p>
</article>
<article id="other-viz" class="slide">
<style data-slide>
.slide#other-viz {
background-image: url('img/other-viz-examples.png');
background-size: cover;
background-repeat: repeat-y;
background-position: 0 0;
animation-name: scrollbg;
animation-duration: 24s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
.slide#other-viz p,
.slide#other-viz h1 {
background-color: black;
padding: 0.125em 0.25em;
}
</style>
<h1>If geography isn't important</h1>
<p>There are plenty of other visualizations to try!</p>
<a class="source" href="https://gramener.github.io/visual-vocabulary-vega/#/FullList/"></a>
</article>
<header id="map-viz" class="slide">
<style data-slide>
.slide#map-viz {
background-image: url('img/map-viz-examples.png');
background-size: cover;
background-repeat: repeat-y;
background-position: 0 0;
animation-name: scrollbg;
animation-duration: 6s;
animation-timing-function: linear;
/* animation-iteration-count: infinite; */
}
.slide#map-viz p,
.slide#map-viz h1 {
background-color: black;
padding: 0.125em 0.25em;
}
</style>
<h1>I <em>actually</em> need a map, yes</h1>
<a class="source" href="https://gramener.github.io/visual-vocabulary-vega/#/Spatial/"></a>
</header>
</section>
<section>
<header class="slide">
<h1>Basic Map Types</h1>
<p class="presenter-notes"></p>
</header>
<article class="slide terminology">
<header><h1>Choropleth</h1></header>
<div id="observablehq-cc0d7a5a"></div>
<script type="module">
import {Runtime, Inspector} from "https://cdn.jsdelivr.net/npm/@observablehq/runtime@4/dist/runtime.js";
import define from "https://api.observablehq.com/@d3/choropleth.js?v=3";
const inspect = Inspector.into("#observablehq-cc0d7a5a");
(new Runtime).module(define, name => (name === "chart") && inspect());
</script>
<a class="source" href="https://observablehq.com/@d3/choropleth?collection=@d3/d3-geo"></a>
<p class="presenter-notes">Should always be rates rather than totals and use a sensible base geography.</p>
</article>
<article class="slide terminology">
<header><h1>Symbol</h1></header>
<div id="observablehq-6c9132f6"></div>
<script type="module">
import {Runtime, Inspector} from "https://cdn.jsdelivr.net/npm/@observablehq/runtime@4/dist/runtime.js";
import define from "https://api.observablehq.com/@d3/bubble-map.js?v=3";
const inspect = Inspector.into("#observablehq-6c9132f6");
(new Runtime).module(define, name => (name === "chart") && inspect());
</script>
<a class="source" href="https://observablehq.com/@d3/bubble-map?collection=@observablehq/maps"></a>
<p class="presenter-notes">Use for totals rather than rates - but small differences in data will be hard to see.</p>
</article>
<article class="slide terminology">
<header><h1>Heatmap</h1></header>
<p>
<img src="img/heatmap-example.png" />
</p>
<a class="source" href="https://observablehq.com/@tmcw/leaflet"></a>
<p class="presenter-notes">Grid-based data values mapped with an intensity colour scale. As choropleth map - but not snapped to an admin/political unit</p>
</article>
</section>
<section>
<article class="slide type-table type-simple-input">
<header><h1>Easiest to start - we have the data!</h1></header>
<table>
<thead>
<tr>
<td style="border: none;"></td>
<th scope="col"><div>Map to view</div></th>
<th scope="col"><div>Map to interact with</div></th>
<th scope="col"><div>Map to contribute to</div></th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row"><div>Data we have</div></th>
<td class="a1"><div></div></td>
<td class="a2"><div></div></td>
<td class="a3"><div></div></td>
</tr>
<tr>
<th scope="row"><div>Data we collect</div></th>
<td class="b1"><div></div></td>
<td class="b2"><div></div></td>
<td class="b3"><div></div></td>
</tr>
<tr>
<th scope="row"><div>Data we create</div></th>
<td class="c1"><div></div></td>
<td class="c2"><div></div></td>
<td class="c3"><div></div></td>
</tr>
</tbody>
</table>
</article>
<header class="slide">
<h1>We have the data!</h1>
<p class="presenter-notes"></p>
</header>
<article class="slide">
<header><h1>Where did the data come from?</h1></header>
</article>
<article id="osm" class="slide bgimg">
<style data-slide>
.slide#osm {
background-image: url('img/osm.png');
}
</style>
<a class="source" href="https://www.openstreetmap.org/"></a>
</article>
<article class="slide terminology">
<header><h1>Web Portals</h1></header>
<ul>
<li><a href="https://www.data.gov/">data.gov</a> Open Data from the U.S. Government</li>
<li><a href="https://docs.digital.mass.gov/dataset/massgis-data-layers">MassGIS</a> Repository of Massachusetts GIS Data</li>
<li><a href="https://www.cambridgema.gov/GIS/gisdatadictionary.aspx">City of Cambridge GIS</a> Repository for City of Cambridge Datasets</li>
<li><a href="http://boston.maps.arcgis.com/home/index.html">Boston Maps</a> Data Resource for City of Boston</li>
<li><a href="https://opendata.cityofnewyork.us/data/">NYC Open Data</a> - New York City</li>
<li><a href="http://dataportals.org/">dataportals.org/</a> collection of open data sites</li>
<li><a href="https://www.google.com/publicdata/directory">Google Public Data</a></li>
</ul>
</article>
</section>
<section>
<header class="slide">
<h1>Easy places to upload and show your data</h1>
<p class="presenter-notes">Some free, some not.</p>
</header>
<article id="google" class="slide bgimg">
<style data-slide>
.slide#google {
background-image: url('img/tools-google.png');
}
</style>
<a class="source" href="https://www.google.com/maps/about/mymaps/"></a>
</article>
<article id="mapquest" class="slide bgimg">
<style data-slide>
.slide#mapquest {
background-image: url('img/tools-mapquest.png');
}
</style>
<a class="source" href="https://www.mapquest.com/my-maps"></a>
</article>
<article id="datawrapper" class="slide bgimg">
<style data-slide>
.slide#datawrapper {
background-image: url('img/tools-datawrapper.png');
}
</style>
<a class="source" href="https://www.datawrapper.de/maps/"></a>
</article>
<article id="batchgeo" class="slide bgimg">
<style data-slide>
.slide#batchgeo {
background-image: url('img/tools-batchgeo.png');
}
</style>
<a class="source" href="https://www.batchgeo.com/"></a>
</article>
<article id="zeemaps" class="slide bgimg">
<style data-slide>
.slide#zeemaps {
background-image: url('img/tools-zeemaps.png');
}
</style>
<a class="source" href="https://www.zeemaps.com/"></a>
</article>
<article id="geojsonio" class="slide bgimg">
<style data-slide>
.slide#geojsonio {
background-image: url('img/tools-geojsonio.png');
}
</style>
<a class="source" href="http://geojson.io/"></a>
</article>
</section>
<section>
<article class="slide type-table type-simple-output">
<header><h1>Easiest to end - we just want a picture.</h1></header>
<table>
<thead>
<tr>
<td style="border: none;"></td>
<th scope="col"><div>Map to view</div></th>
<th scope="col"><div>Map to interact with</div></th>
<th scope="col"><div>Map to contribute to</div></th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row"><div>Data we have</div></th>
<td class="a1"><div></div></td>
<td class="a2"><div></div></td>
<td class="a3"><div></div></td>
</tr>
<tr>
<th scope="row"><div>Data we collect</div></th>
<td class="b1"><div></div></td>
<td class="b2"><div></div></td>
<td class="b3"><div></div></td>
</tr>
<tr>
<th scope="row"><div>Data we create</div></th>
<td class="c1"><div></div></td>
<td class="c2"><div></div></td>
<td class="c3"><div></div></td>
</tr>
</tbody>
</table>
</article>
<header class="slide">
<h1>We need a simple graphic.</h1>
<p class="presenter-notes">It's going to be static, I'll probably never update it again, etc. I might even print it! But there are some important things you need to keep in mind.</p>
</header>
<article class="slide terminology">
<header><h1>Basemap / Image tiles</h1></header>
<p><img src="https://images.squarespace-cdn.com/content/v1/54ff63f0e4b0bafce6932642/1493083821537-QB2WXYDV7ZFPW559G8VQ/ke17ZwdGBToddI8pDm48kBvq8a2_1zGsaX8oJIPdTgQUqsxRUqqbr1mOJYKfIPR7LoDQ9mXPOjoJoqy81S2I8N_N4V1vUb5AoIIIbLZhVYy7Mythp_T-mtop-vrsUOmeInPi9iDjx9w8K4ZfjXt2diVeS_FDlPKXiF4F-Ml1a0vpjmJvOnWOTrPkM6wURrRmP7cJNZlDXbgJNE9ef52e8w/image-asset.jpeg?format=1500w" /></p>
<a class="source" href="https://www.justinobeirne.com/cartography-comparison"></a>
</article>
<article class="slide">
<header><h1>Visual Variables</h1></header>
<p><img src="https://www.axismaps.com/media/posts/2018/09/visual_variables.png" /></p>
<a class="source" href="https://www.axismaps.com/media/posts/2018/09/visual_variables.png"></a>
</article>
<article class="slide terminology">
<header><h1>Projections</h1></header>
<p><div id="observablehq-0d2cdc9f" style="margin: 0 auto; width: 100%; max-width: 100%; overflow-y: hidden; "></div></p>
<script type="module">
import {Runtime, Inspector} from "https://cdn.jsdelivr.net/npm/@observablehq/runtime@4/dist/runtime.js";
import define from "https://api.observablehq.com/@d3/projection-comparison.js?v=3";
const inspect = Inspector.into("#observablehq-0d2cdc9f");
(new Runtime).module(define, name => (name === "map") && inspect());
</script>
<a class="source" href="https://observablehq.com/@d3/projection-comparison?collection=@d3/d3-geo"></a>
</article>
<article class="slide terminology">
<header><h1>Scales</h1></header>
<p><img src="img/quantile-quantize-and-threshold-scales.png" /></p>
<a class="source" href="https://observablehq.com/@d3/quantile-quantize-and-threshold-scales"></a>
<p class="presenter-notes">
Quantiles are defined, in statistics, as separating a population into intervals of similar sizes (the 10% poorest, the 50% tallest, the 1% richest…); a quantile scale is essentially defined by its domain, a fixed set of values — when applied to a new value, it will then compute its ranking with respect to the initial distribution, and map that ranking to the output range.
To Quantize means to group values with discrete increments — like expressing a list of floating point numbers with 1 decimal digit, or rounding time to the closest minute. It is the output range that is discretized, and such a scale allows to transform an initial continuous range into a discrete set of classes.
Threshold scales will allow us to directly specify the cut values that separate the classes.
Various clustering algorithms can provide reasonable thresholds — the most common in geography is known as "Jenks natural breaks"
</p>
</article>
<article class="slide terminology">
<header><h1>Sequential color scales</h1></header>
<p><img src="img/colors-sequential.png" /></p>
<a class="source" href="http://colorbrewer2.org/#type=sequential&scheme=Purples&n=5"></a>
</article>
<article class="slide terminology">
<header><h1>Diverging color scales</h1></header>
<p><img src="img/colors-diverging.png" /></p>
<a class="source" href="http://colorbrewer2.org/#type=diverging&scheme=RdBu&n=5"></a>
</article>
<article class="slide terminology">
<header><h1>Qualitative color scales</h1></header>
<p><img src="img/colors-qualitative.png" /></p>
<a class="source" href="http://colorbrewer2.org/#type=qualitative&scheme=Accent&n=5"></a>
</article>
<article class="slide terminology">
<header><h1>Vector & raster formats</h1></header>
<p>
<img src="https://mangomap.com/assets/images/vector-raster.png"/>
</p>
<a class="source" href="https://mangomap.com/gis-data"></a>
<p class='presenter-notes'>
Vector data contains one or more coordinates that describe how to draw the point, line or polygon that represents that feature on the face of the earth. Raster data is usually used for satellite imagery, aerial photography, elevation models and topographic maps.
</p>
</article>
</section>
<section>
<article class="slide type-table type-common">
<header><h1>Most maps we want</h1></header>
<table>
<thead><tr>
<td style="border: none;"></td>
<th scope="col"><div>Map to view</div></th>
<th scope="col"><div>Map to interact with</div></th>
<th scope="col"><div>Map to contribute to</div></th>
</tr></thead>
<tbody>
<tr>
<th scope="row"><div>Data we have</div></th>
<td class="a1"><div></div></td>
<td class="a2"><div></div></td>
<td class="a3"><div></div></td>
</tr><tr>
<th scope="row"><div>Data we collect</div></th>
<td class="b1"><div></div></td>
<td class="b2"><div></div></td>
<td class="b3"><div></div></td>
</tr><tr>
<th scope="row"><div>Data we create</div></th>
<td class="c1"><div></div></td>
<td class="c2"><div></div></td>
<td class="c3"><div></div></td>
</tr>
</tbody>
</table>
</article>
<header class="slide">
<h1>There're <em>a lot</em> of libraries and tools for that</h1>
<p class="presenter-notes">Data that we may have to process on a map that we may want our audience to interact with? We're going to get pretty programmy now.</p>
</header>
<article class="slide terminology">
<header><h1>Geographic Information System (GIS)</h1></header>
<p><img src="https://mangomap.com/assets/images/gis-qgis-expression.PNG" /></p>
<ul>
<li>Shapefiles (.shp) can store point, line, and area data, along with attribute information</li>
<li>GeoTIFFs (.tiff) can store bitmap images with location-specific metadata</li>
<li class="delayed">Usually involves bulky desktop software, but you can run queries!</li>
</ul>
<a class="source" href="https://mangomap.com/gis-data"></a>
<p class="presenter-notes">Queries such as 'show me all of the counties in which we made more than $50,000 in sales last year'</p>
</article>
<article id="arcgis" class="slide bgimg">
<style data-slide>
.slide#arcgis { background-image: url('img/arcgis.png'); }
</style>
<a class="source" href="https://www.esri.com/en-us/arcgis/products/arcgis-pro/overview"></a>
<p class="presenter-notes">
ArcGIS - you see a lot of their output.
</p>
</article>
<article id="qgis" class="slide bgimg">
<style data-slide>
.slide#qgis { background-image: url('img/qgis.png'); }
</style>
<a class="source" href="https://www.qgis.org/en/site/"></a>
<p class="presenter-notes">
QGIS - free and open source
</p>
</article>
<article class="slide terminology">
<header><h1>Geocoding</h1></header>
<p><img src="https://mangomap.com/assets/images/gis-yourdata-mapdata.png" /></p>
<ul>
<li>Taking locations and actually turning it into geographically-relevant information ("Statue of Liberty" to (40.7,-74.0))</li>
<li>Reverse geocoding is also a thing ((40.7,-74.0) to "Statue of Liberty")</li>
</ul>
<a class="source" href="https://mangomap.com/gis-data"></a>
</article>
<article class="slide">
<header><h1>Census Data!</h1></header>
<div id="observablehq-ba083525"></div>
<script type="module">
import {Runtime, Inspector} from "https://cdn.jsdelivr.net/npm/@observablehq/runtime@4/dist/runtime.js";
import define from "https://api.observablehq.com/@mbostock/population-change-2017-2018.js?v=3";
const inspect = Inspector.into("#observablehq-ba083525");
(new Runtime).module(define, name => (name === "chart") && inspect());
</script>
<a class="source" href="https://observablehq.com/@mbostock/population-change-2017-2018"></a>
</article>
<article class="slide terminology">
<header><h1>GeoJSON & TopoJSON</h1></header>
<pre class="language-json"><code class="language-json">
{
"type": "Feature",
"id": 8,
"properties": {"name": "Colorado"},
"geometry": {
"type": "Polygon",
"coordinates": [
[[-106.32056285448942,40.998675790862656],[-106.19134826714341,40.99813863734313], /*...*/]
]
}
}
</code></pre>
<a class="source" href="https://observablehq.com/@uwdata/cartographic-visualization"></a>
<p class="presenter-notes">
GeoJSON models geographic features within a specialized JSON format. A GeoJSON feature can include geometric data – such as longitude, latitude coordinates that make up a country boundary – as well as additional data attributes. The TopoJSON format uses a more compact approach is to encode shared borders only once, representing the topology of geographic regions - resulting in files that are much smaller.
</p>
</article>
<article class="slide">
<header><h1>some JavaScript libraries</h1></header>
<ul>
<li>Leaflet</li>
<li>Mapbox</li>
<li>CARTO</li>
<li>OpenLayers</li>
<li>Cesium</li>
<li>Deck.gl</li>
<li>d3</li>
</ul>
</article>
<article class="slide">
<header><h1>some Python libraries</h1></header>
<ul>
<li>shapely</li>
<li>Geopandas</li>
<li>Rasterio</li>
<li>descartes</li>
<li>PySAL</li>
</ul>
</article>
<article class="slide">
<header><h1>some other services and tools</h1></header>
<ul>
<li>Geospatial Data Abstraction Library (GDAL) is a translator library for raster and vector geospatial data formats</li>
<li>PostGIS is a PostgreSQL spatial extension</li>
<li class="delayed">...just go look at the <a href="https://github.com/sacridini/Awesome-Geospatial">Awesome Geospatial</a> list</li>
</ul>
</article>
</section>
<section>
<header class="slide">
<h1>More resources</h1>
<p class="presenter-notes">Even more tools, command line tools, open source options, tutorials and guides</p>
</header>
<article class="slide">
<header><h1>Resource collections</h1></header>
<ul>
<li><a href="http://maptime.io/lessons-resources/">Lessons and Resources (Maptime HQ)</a></li>
<li><a href="http://maptimeboston.github.io/resources">Resources and tutorials (Maptime Boston)</a></li>
<li><a href="https://www.axismaps.com/guide/">Cartography guide (Axis Maps)</a></li>
<li><a href="https://www.axismaps.com/guide/general/resources/">Map design resources (Axis Maps)</a></li>
<li><a href="https://github.com/tolomaps/resources">Cartography / mapping / web design resources ([email protected])</a></li>
<li><a href="https://github.com/nvkelso/geo-how-to">geo how-to: commands, notes for open-source geo workflows (nvkelso)</a></li>
<li><a href="http://duspviz.mit.edu/resources/">Visualization and GIS resources (MIT DUSP)</a></li>
<li><a href="https://www.missingmaps.org/learn/">OSM tutorials (Missing Maps)</a></li>
</ul>
</article>
</section>
<footer class="slide" title="The End">
<h1>Thank you!</h1>
<p>See this again with more slides with even more resources at <a href="https://maptimeboston.github.io/map-modalities">https://maptimeboston.github.io/map-modalities</a>.</p>
</footer>
<script src="inspire.js"></script>
<!-- <script src="plugins/prism/plugin.js"></script> -->
</body>
</html>