-
Notifications
You must be signed in to change notification settings - Fork 40
/
index.html
326 lines (322 loc) · 29.5 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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta name="generator" content="pandoc" />
<title></title>
<style type="text/css">code{white-space: pre;}</style>
<link rel="stylesheet" type="text/css" href="../css/fixed-nav-bar.css" />
<link rel="stylesheet" type="text/css" href="../css/markdown.css" />
</head>
<body>
<nav class="fixed-nav-bar">
<div id="menu" class="menu">
<a class="sitename" href="http://arnicas.github.io/interactive-vis-course/index.html">Interactive Data Vis</a>
<a class="show" href="#menu">Menu</a><a class="hide" href="#hidemenu">Menu</a>
<ul class="menu-items">
<li><a href="http://arnicas.github.io/interactive-vis-course/index.html">Course Home</a></li>
<li><a href="http://arnicas.github.io/interactive-vis-course/examples.html">Examples List</a></li>
<li><a href="http://github.com/arnicas/interactive-vis-course/">Repo</a></li>
<li><a href="http://www.ghostweather.com">Lynn's Site</a></li>
<li><a href="//twitter.com/arnicas">@arnicas</a></li>
</ul>
</div>
</nav>
<h3>On This Page...</h3>
<div id="TOC">
<ul>
<li><a href="#week-11-maps">Week 11: Maps</a><ul>
<li><a href="#homework-review">Homework Review</a></li>
<li><a href="#d3-maps">D3 Maps</a><ul>
<li><a href="#topojson-vs-geojson">TopoJSON vs GEOJSON</a></li>
<li><a href="#examples-showing-multiple-detail-levels">Examples Showing Multiple Detail Levels</a></li>
<li><a href="#choropleths">Choropleths</a></li>
<li><a href="#us-states-and-counties">US States and Counties</a></li>
<li><a href="#dots-on-maps">Dots on Maps</a></li>
<li><a href="#click-on-a-map-to-trigger-stuff">Click on a Map to Trigger Stuff</a></li>
</ul></li>
<li><a href="#other-map-stuff-beyond-d3">Other Map Stuff Beyond D3</a><ul>
<li><a href="#slippy-maps-with-detail-under-your-data-e.g.-leaflet">Slippy Maps With Detail Under Your Data (e.g., Leaflet)</a></li>
<li><a href="#combining-d3-with-tile-maps">Combining D3 with Tile Maps</a></li>
<li><a href="#lat-lon-vs-lon-lat-beware">Lat, Lon vs Lon, Lat: BEWARE</a></li>
<li><a href="#map-demos-i-like">Map Demos I Like</a></li>
<li><a href="#other-map-tutorials-to-read">Other Map Tutorials to Read</a></li>
<li><a href="#map-tools">Map Tools</a></li>
<li><a href="#resources-for-geo-data-files">Resources for Geo Data / Files</a></li>
<li><a href="#map-design-guidelines">Map Design Guidelines</a></li>
</ul></li>
<li><a href="#recap-so-far-project-ahead">Recap So Far: Project Ahead</a></li>
<li><a href="#recent-interesting-things">Recent Interesting Things</a></li>
<li><a href="#homework">Homework</a></li>
</ul></li>
</ul>
</div>
<h1 id="week-11-maps">Week 11: Maps</h1>
<h2 id="homework-review">Homework Review</h2>
<p><strong>Great small multiples</strong>:</p>
<ul>
<li>Sherman: <a href="https://bl.ocks.org/SHewitt95/raw/6118753c31f858accacf/" class="uri">https://bl.ocks.org/SHewitt95/raw/6118753c31f858accacf/</a></li>
<li>Sunny's Meat: <a href="http://bl.ocks.org/sunnyuxuan/raw/851e43179a9f6b3cc079/" class="uri">http://bl.ocks.org/sunnyuxuan/raw/851e43179a9f6b3cc079/</a></li>
<li>Eliot's drugs: <a href="https://bl.ocks.org/eliot84/raw/99ea880dcdf06162fa2b/" class="uri">https://bl.ocks.org/eliot84/raw/99ea880dcdf06162fa2b/</a></li>
<li>Luying's Road accidents: <a href="http://bl.ocks.org/luluwuluying/raw/656a43c441b82549cd04/" class="uri">http://bl.ocks.org/luluwuluying/raw/656a43c441b82549cd04/</a></li>
<li>Eric's cars: <a href="http://bl.ocks.org/suneric1/raw/c5432c5ecd181dc8b4fe/" class="uri">http://bl.ocks.org/suneric1/raw/c5432c5ecd181dc8b4fe/</a></li>
<li>Hyan's Students (pure d3 sorting!): <a href="http://bl.ocks.org/hfreitas92/raw/8dc916746d1c0ca569e4/" class="uri">http://bl.ocks.org/hfreitas92/raw/8dc916746d1c0ca569e4/</a></li>
<li>Zhou's F1: <a href="http://bl.ocks.org/captainelaine/raw/a9dafcc81ee3dcdb2416/" class="uri">http://bl.ocks.org/captainelaine/raw/a9dafcc81ee3dcdb2416/</a></li>
<li>Han's bars: <a href="http://bl.ocks.org/jashcny/raw/f4d0bfad19c385e2525b/" class="uri">http://bl.ocks.org/jashcny/raw/f4d0bfad19c385e2525b/</a></li>
<li>Claudia's terrorism: <a href="http://bl.ocks.org/claudialexa/raw/e388b88bf6b57e132f76/" class="uri">http://bl.ocks.org/claudialexa/raw/e388b88bf6b57e132f76/</a> (might want to use the same scale?)</li>
<li>Josh's teams: <a href="http://bl.ocks.org/CafeConVega/raw/26ca0ade9b4647c33ed3/" class="uri">http://bl.ocks.org/CafeConVega/raw/26ca0ade9b4647c33ed3/</a> (pure d3!)</li>
<li>Shi Li's amazing detail on demand charts: <a href="http://bl.ocks.org/shishi0906/raw/65e772aa23825104d0b0/" class="uri">http://bl.ocks.org/shishi0906/raw/65e772aa23825104d0b0/</a></li>
</ul>
<p><strong>Reminder</strong>:</p>
<p>Get your data sets in shape -- download, explore, CSV-ify them, start using them.<br />
If your data is in PDF tables, try Tabula: <a href="http://tabula.technology/" class="uri">http://tabula.technology/</a></p>
<h2 id="d3-maps">D3 Maps</h2>
<h3 id="topojson-vs-geojson">TopoJSON vs GEOJSON</h3>
<p>You were supposed to read Mike's tutorial: <a href="http://bost.ocks.org/mike/map/" class="uri">http://bost.ocks.org/mike/map/</a>.</p>
<p>He introduces TopoJSON (<a href="https://github.com/mbostock/topojson/wiki" class="uri">https://github.com/mbostock/topojson/wiki</a>). Confusingly, this is sometimes a file format, sometimes about command line software, sometimes about the js library.</p>
<p>What is it? It's a simplification format for map data that reduces the file size of GeoJSON data. <strong>If your data is in TopoJSON format, rather than plain GEOJSON, you need to also include TopoJSON in your javascript library includes. And you need to use it to access your map data.</strong></p>
<p>There are some non-command line tools now for working with Topojson (including creating it from GEOJSON files):</p>
<ul>
<li>Convert GeoJSON to TopoJSON: <a href="http://shancarter.github.io/distillery/" class="uri">http://shancarter.github.io/distillery/</a></li>
<li>TopoJSON property editor: <a href="http://bl.ocks.org/capesean/92b7d3c7cb7b5e9639ab" class="uri">http://bl.ocks.org/capesean/92b7d3c7cb7b5e9639ab</a> (only edits to the properties field, by hand, when you click on a region)</li>
<li>Another editor/viewer: <a href="http://geojson.io/#map=2/20.0/0.0" class="uri">http://geojson.io/#map=2/20.0/0.0</a> (have used this, it's nice!)</li>
</ul>
<p>Let's look at this too:</p>
<ul>
<li><a href="http://techslides.com/demos/d3/d3-exploring-countries.html" class="uri">http://techslides.com/demos/d3/d3-exploring-countries.html</a></li>
</ul>
<p>There are some more tools for non-command-line work in the Map Tools section below.</p>
<p>The data directory for Week 11 has a bunch of useful topojson files in one subdirectory, and geojson in another directory. Remember to include and use topojson.js if you use those files.</p>
<h3 id="examples-showing-multiple-detail-levels">Examples Showing Multiple Detail Levels</h3>
<p>Now let's look at <a href="africa_map.html" class="uri">africa_map.html</a> first. That's a simple map of borders using TopoJSON of the continent.</p>
<p>Then <a href="africa_map2.html" class="uri">africa_map2.html</a> -- look how we get to the actual country features.</p>
<p>Now let's look at coloring the world by regions in <a href="world_map_regions.html" class="uri">world_map_regions.html</a> and discuss.</p>
<h3 id="choropleths">Choropleths</h3>
<p>Choropleths are thematic maps colored according to a data values associated with regions. This is probably what you will need for your project.</p>
<p>There ARE some ways to get such maps without much work - use CartoDB, for instance.</p>
<p>See <a href="carto_db_example.html" class="uri">carto_db_example.html</a> and demo on cartoDB. (Also others in the Tools section.)</p>
<p>But doing it by hand is not too bad, and always full customization, as usual. Your options are to either merge the data into the geo/topo json file (see <a href="simple_us_states_data.html" class="uri">simple_us_states_data.html</a>), or use some kind of key to relate the two (like ISO code), as in <a href="world_comparisons.html" class="uri">world_comparisons.html</a>. You can also merge the data in the topojson generation process at the command line if you want to do that. We'll be doing the key lookup version for most of the examples, although you should check out <a href="simple_us_states_data.html" class="uri">simple_us_states_data.html</a>.</p>
<p>Example <a href="africa_map3.html" class="uri">africa_map3.html</a> introduces a bunch of new useful stuff:</p>
<ul>
<li>loading multiple files with queue -- <a href="https://github.com/mbostock/queue" class="uri">https://github.com/mbostock/queue</a></li>
<li>a legend plugin -- <a href="http://d3-legend.susielu.com/" class="uri">http://d3-legend.susielu.com/</a></li>
<li>a d3.map() hash table to lookup stuff for the choropleth -- <a href="https://github.com/mbostock/d3/wiki/Arrays#d3_map" class="uri">https://github.com/mbostock/d3/wiki/Arrays#d3_map</a></li>
</ul>
<p>Finally, here's a fully interactive map with multiple data sets and tooltips, from Flowing Data:</p>
<ul>
<li>Interactive Map with Category Filters:<br />
<a href="http://flowingdata.com/2015/02/19/make-an-interactive-map-with-category-filters/" class="uri">http://flowingdata.com/2015/02/19/make-an-interactive-map-with-category-filters/</a></li>
<li>And my version using UNICEF data and some changes: <strong><a href="world_comparisons.html" class="uri">world_comparisons.html</a></strong></li>
</ul>
<p>Any design suggestions? How would you improve the tooltips?</p>
<h3 id="us-states-and-counties">US States and Counties</h3>
<p>There is a US states and counties Topojson file in your data directory, thanks to Mike Bostock. You can use it for making US maps if you need to.</p>
<p>Use of the Albers projection for the USA gives you Alaska and Hawaii in a nice location.</p>
<ul>
<li><a href="https://github.com/mbostock/d3/wiki/Geo-Projections" class="uri">https://github.com/mbostock/d3/wiki/Geo-Projections</a></li>
</ul>
<p>Also, coloring states:</p>
<ul>
<li><a href="coloring_us_counties.html" class="uri">coloring_us_counties.html</a></li>
</ul>
<p>Using a click-event to change data shown (plus a nice tooltip):</p>
<ul>
<li><a href="coloring_us_counties_with_data.html" class="uri">coloring_us_counties_with_data.html</a></li>
</ul>
<p>For county and state id's, see this list: <a href="https://www.census.gov/econ/cbp/download/georef02.txt" class="uri">https://www.census.gov/econ/cbp/download/georef02.txt</a> The "id" in the us topojson file I've given you is the FIPS code for the state and county.<br />
The State ID is the first 2 digits. How would we filter for a single state and country?</p>
<ul>
<li><a href="coloring_florida_with_data.html" class="uri">coloring_florida_with_data.html</a></li>
</ul>
<h3 id="dots-on-maps">Dots on Maps</h3>
<p>We can use our <code>projection([lon, lat])</code> to position things on a map.</p>
<pre><code>svg.selectAll("circle")
.data(data)
.enter()
.append("circle")
.attr("cx", function(d) {
return projection([d.lon, d.lat])[0]; // x coordinate
})
.attr("cy", function(d) {
return projection([d.lon, d.lat])[1]; // y coordinate
})
.attr("r", 5);</code></pre>
<ul>
<li>Also, the example <a href="simple_us_states_data.html" class="uri">simple_us_states_data.html</a> shows a choropleth and dots on the map.</li>
<li>Example <a href="rats_in_NYC.html" class="uri">rats_in_NYC.html</a>: All the rat data, takes a while to load!</li>
</ul>
<h3 id="click-on-a-map-to-trigger-stuff">Click on a Map to Trigger Stuff</h3>
<p>Often you will want to trigger actions off charts or maps on click.</p>
<p>An example is in <strong><a href="africa_map_clicker.html" class="uri">africa_map_clicker.html</a>.</strong> Of course, the div with the tooltip-like text could instead be another chart!</p>
<p>Notice how important the moveToFront() is for the map mouseover!</p>
<h2 id="other-map-stuff-beyond-d3">Other Map Stuff Beyond D3</h2>
<h3 id="slippy-maps-with-detail-under-your-data-e.g.-leaflet">Slippy Maps With Detail Under Your Data (e.g., Leaflet)</h3>
<p>Often when you put points on maps, you want to preserve the underlying geography. That means you want slippy maps with zoom in and out capability. Leaflet is one of the main tools for this.</p>
<p>We can do it using markers in leaflet.js. Here's a nice Ratmap using leaflet and d3: <a href="http://benjmyers.com/ratmap/#/" class="uri">http://benjmyers.com/ratmap/#/</a></p>
<p>Here's an example rat map using Leaflet and leaflet markers:</p>
<ul>
<li><a href="rats_in_NYC_leaflet.html" class="uri">rats_in_NYC_leaflet.html</a></li>
<li>Here's a silly example using the flickr api and a story generator (tracery.js), with the same dataset: <a href="http://bl.ocks.org/arnicas/d210166c6d302da09397" class="uri">http://bl.ocks.org/arnicas/d210166c6d302da09397</a></li>
</ul>
<h3 id="combining-d3-with-tile-maps">Combining D3 with Tile Maps</h3>
<ul>
<li>Google Maps and D3 points: <a href="http://bl.ocks.org/mbostock/899711" class="uri">http://bl.ocks.org/mbostock/899711</a></li>
<li>Leaflet and D3, a writeup by Mike: <a href="https://bost.ocks.org/mike/leaflet/" class="uri">https://bost.ocks.org/mike/leaflet/</a></li>
</ul>
<p>See the example in <a href="us_states_data_leaflet.html" class="uri">us_states_data_leaflet.html</a> -- choropleth plus dots on a leaflet underlayer.</p>
<h3 id="lat-lon-vs-lon-lat-beware">Lat, Lon vs Lon, Lat: BEWARE</h3>
<p>Some tools assume <code>[lon, lat]</code> and others want it the other way.</p>
<p>D3 wants <code>[lon, lat]</code>. Leaflet wants <code>[lat, lon]</code>.</p>
<p>Read this: <a href="http://www.macwright.org/lonlat/" class="uri">http://www.macwright.org/lonlat/</a></p>
<h3 id="map-demos-i-like">Map Demos I Like</h3>
<ul>
<li>Scattered Well-Being (in Mexico): <a href="http://wikiprogress.org/wikiprogress-data-visualization-contest-2015-scattered-well-being/" class="uri">http://wikiprogress.org/wikiprogress-data-visualization-contest-2015-scattered-well-being/</a>, <a href="http://mollica.space/scattered-well-being/" class="uri">http://mollica.space/scattered-well-being/</a></li>
<li>Migrant Deaths: <a href="http://bl.ocks.org/shobhitg/60eec0e1727c6c628728" class="uri">http://bl.ocks.org/shobhitg/60eec0e1727c6c628728</a></li>
<li>Comparing Map Projections: <a href="http://bl.ocks.org/syntagmatic/ba569633d51ebec6ec6e" class="uri">http://bl.ocks.org/syntagmatic/ba569633d51ebec6ec6e</a></li>
<li>Compare Parts of the World: <a href="http://bl.ocks.org/zanarmstrong/raw/caa2da1ea1558cdc3357/#scale=527&center0=-56.44,-17.1&center1=6.07833,53.2052" class="uri">http://bl.ocks.org/zanarmstrong/raw/caa2da1ea1558cdc3357/#scale=527&center0=-56.44,-17.1&center1=6.07833,53.2052</a></li>
<li>Map morph to scatterplot: <a href="http://www.brendansudol.com/writing/usa-animated/" class="uri">http://www.brendansudol.com/writing/usa-animated/</a></li>
<li>Cartograms with d3 and topojson: <a href="http://prag.ma/code/d3-cartogram/?segmentized&utm_content=buffer6b792&utm_medium=social&utm_source=twitter.com&utm_campaign=buffer#popchange/2011" class="uri">http://prag.ma/code/d3-cartogram/?segmentized&utm_content=buffer6b792&utm_medium=social&utm_source=twitter.com&utm_campaign=buffer#popchange/2011</a></li>
<li>Related, geo-exploder: <a href="http://bsouthga.github.io/d3-exploder/" class="uri">http://bsouthga.github.io/d3-exploder/</a></li>
<li>Population map with latitude lines: <a href="http://www.roadtolarissa.com/population-division-fullscreen.html" class="uri">http://www.roadtolarissa.com/population-division-fullscreen.html</a></li>
<li>Animated World Map Zoom: <a href="https://www.jasondavies.com/maps/zoom/" class="uri">https://www.jasondavies.com/maps/zoom/</a></li>
<li>Epic NYT small multiples: <a href="http://www.nytimes.com/interactive/2012/07/20/us/drought-footprint.html" class="uri">http://www.nytimes.com/interactive/2012/07/20/us/drought-footprint.html</a></li>
<li>Civilian Fatalities in Afghanistan - by Pitch Interactive, <a href="http://www.thenation.com/afghanistan-database/" class="uri">http://www.thenation.com/afghanistan-database/</a> -- little maps in the tooltips!</li>
<li>Taxi Map of NYC: <a href="http://nyctaxi.herokuapp.com/" class="uri">http://nyctaxi.herokuapp.com/</a> And tutorials related:
<ul>
<li>Leaflet, D3, animation: <a href="http://chriswhong.com/open-data/taxi-techblog-2-leaflet-d3-and-other-frontend-fun/" class="uri">http://chriswhong.com/open-data/taxi-techblog-2-leaflet-d3-and-other-frontend-fun/</a></li>
<li>Related: <a href="http://zevross.com/blog/2014/09/30/use-the-amazing-d3-library-to-animate-a-path-on-a-leaflet-map/" class="uri">http://zevross.com/blog/2014/09/30/use-the-amazing-d3-library-to-animate-a-path-on-a-leaflet-map/</a></li>
<li>Also: <a href="http://zevross.com/blog/2014/12/09/use-d3-to-gradually-reveal-points-on-a-leaflet-web-map/" class="uri">http://zevross.com/blog/2014/12/09/use-d3-to-gradually-reveal-points-on-a-leaflet-web-map/</a></li>
</ul></li>
</ul>
<h3 id="other-map-tutorials-to-read">Other Map Tutorials to Read</h3>
<ul>
<li>Read Noah Veltman's primer on maps and tools:<br />
<a href="https://github.com/veltman/learninglunches/tree/master/maps" class="uri">https://github.com/veltman/learninglunches/tree/master/maps</a></li>
<li>A simple d3 map explained: <a href="http://www.d3noob.org/2013/03/a-simple-d3js-map-explained.html" class="uri">http://www.d3noob.org/2013/03/a-simple-d3js-map-explained.html</a><br />
<a href="https://github.com/maptimelex/d3-mapping/blob/master/README.md#1-a-very-simple-d3-map" class="uri">https://github.com/maptimelex/d3-mapping/blob/master/README.md#1-a-very-simple-d3-map</a></li>
<li>Mike's choropleth example for d3: <a href="http://bl.ocks.org/mbostock/4060606" class="uri">http://bl.ocks.org/mbostock/4060606</a></li>
<li>Another detailed D3 choropleth tutorial: <a href="http://www.cartographicperspectives.org/index.php/journal/article/view/cp78-sack-et-al/1359" class="uri">http://www.cartographicperspectives.org/index.php/journal/article/view/cp78-sack-et-al/1359</a></li>
<li>On map coloring scales: <a href="http://roadtolarissa.com/blog/2015/01/04/coloring-maps-with-d3/" class="uri">http://roadtolarissa.com/blog/2015/01/04/coloring-maps-with-d3/</a></li>
<li>Small Multiple Maps: <a href="http://blog.webkid.io/multiple-maps-d3/?utm_content=bufferc7f1a&utm_medium=social&utm_source=twitter.com&utm_campaign=buffer" class="uri">http://blog.webkid.io/multiple-maps-d3/?utm_content=bufferc7f1a&utm_medium=social&utm_source=twitter.com&utm_campaign=buffer</a></li>
<li>Animated Maps tutorial:<br />
<a href="https://github.com/maptime-ams/animated-borders-d3js?utm_content=bufferb12b2&utm_medium=social&utm_source=twitter.com&utm_campaign=buffer" class="uri">https://github.com/maptime-ams/animated-borders-d3js?utm_content=bufferb12b2&utm_medium=social&utm_source=twitter.com&utm_campaign=buffer</a></li>
<li>Extensive tutorial files:<br />
<a href="http://maptimeboston.github.io/d3-maptime/?utm_content=bufferf944d&utm_medium=social&utm_source=twitter.com&utm_campaign=buffer#/" class="uri">http://maptimeboston.github.io/d3-maptime/?utm_content=bufferf944d&utm_medium=social&utm_source=twitter.com&utm_campaign=buffer#/</a></li>
<li>Doing Pan and Zoom in maps, by Mike: <a href="http://bl.ocks.org/mbostock/8fadc5ac9c2a9e7c5ba2" class="uri">http://bl.ocks.org/mbostock/8fadc5ac9c2a9e7c5ba2</a>, and an article on this: <a href="http://techslides.com/d3-world-maps-tooltips-zooming-and-queue" class="uri">http://techslides.com/d3-world-maps-tooltips-zooming-and-queue</a></li>
<li>Using the free QGIS app and this tutorial from Jim Vallandingham:<br />
<a href="http://vallandingham.me/shapefile_to_geojson.html" class="uri">http://vallandingham.me/shapefile_to_geojson.html</a></li>
</ul>
<h3 id="map-tools">Map Tools</h3>
<h4 id="misc">Misc</h4>
<ul>
<li>Make a Choropleth out of Geo or TopoJSON data, but this requires your variable for coloring be in the geo file: <a href="http://code.minnpost.com/tulip/" class="uri">http://code.minnpost.com/tulip/</a></li>
<li>D3 Geomap, a slightly simpler mapping library for relating CSV and geo files: <a href="https://d3-geomap.github.io/" class="uri">https://d3-geomap.github.io/</a></li>
<li>Visualize projection distortion:<br />
<a href="http://bl.ocks.org/enjalot/bd552e711b8325c64729" class="uri">http://bl.ocks.org/enjalot/bd552e711b8325c64729</a></li>
<li>DataMaps: <a href="http://datamaps.github.io/" class="uri">http://datamaps.github.io/</a>
<ul>
<li>Example of it used: <a href="http://data.runkeeper.com/rk-usa-running-stats-by-state" class="uri">http://data.runkeeper.com/rk-usa-running-stats-by-state</a></li>
</ul></li>
</ul>
<h4 id="cartodb">CartoDB</h4>
<ul>
<li>CartoDB: <a href="https://cartodb.com/gallery/" class="uri">https://cartodb.com/gallery/</a></li>
<li>CartoDB by hand Choropleths: <a href="http://docs.cartodb.com/tutorials/electoral_map.html" class="uri">http://docs.cartodb.com/tutorials/electoral_map.html</a></li>
<li>CartoDB with d3: <a href="http://bl.ocks.org/andrewxhill/4448106" class="uri">http://bl.ocks.org/andrewxhill/4448106</a></li>
<li>My example: <a href="carto_db_example.html" class="uri">carto_db_example.html</a></li>
</ul>
<h4 id="slippy-maps-map-tiles-that-you-can-panzoom-around">Slippy Maps (Map "tiles" that you can pan/zoom around)</h4>
<ul>
<li>Mapbox: <a href="https://www.mapbox.com/maps/" class="uri">https://www.mapbox.com/maps/</a></li>
<li>Stamen: if you like maps, keep up: <a href="http://stamen.com/" class="uri">http://stamen.com/</a></li>
<li>Map Tiles: <a href="http://maps.stamen.com/#terrain/12/37.7706/-122.3782" class="uri">http://maps.stamen.com/#terrain/12/37.7706/-122.3782</a></li>
<li>Google docs will map for you, and geocode (the process of getting lat/lon for places)</li>
</ul>
<h4 id="leaflet-a-nice-js-map-lib-for-slippy-maps-ive-used-and-rec-it">Leaflet, a nice JS map lib for slippy maps (I've used and rec it)</h4>
<ul>
<li>Leaflet:<br />
<a href="http://maptimeboston.github.io/leaflet-intro/" class="uri">http://maptimeboston.github.io/leaflet-intro/</a></li>
<li>D3 with Leaflet:<br />
<a href="http://bost.ocks.org/mike/leaflet/" class="uri">http://bost.ocks.org/mike/leaflet/</a></li>
</ul>
<h3 id="resources-for-geo-data-files">Resources for Geo Data / Files</h3>
<p>(Thanks to Noah Veltman's post here: <a href="http://mapstarter.com/" class="uri">http://mapstarter.com/</a>)</p>
<ul>
<li><a href="http://geocommons.com/" class="uri">http://geocommons.com/</a></li>
<li>Natural Earth: <a href="http://www.naturalearthdata.com/downloads/" class="uri">http://www.naturalearthdata.com/downloads/</a></li>
<li>LA and California: <a href="http://boundaries.latimes.com/sets/" class="uri">http://boundaries.latimes.com/sets/</a></li>
<li>Illinois and Chicago: <a href="http://boundaries.tribapps.com/api/" class="uri">http://boundaries.tribapps.com/api/</a></li>
<li>Minneapolis Post: <a href="http://boundaries.minnpost.com/#datasets" class="uri">http://boundaries.minnpost.com/#datasets</a></li>
<li>Mike Bostock's files for county names, state names, countries:<br />
<a href="http://bl.ocks.org/mbostock/4090846" class="uri">http://bl.ocks.org/mbostock/4090846</a></li>
</ul>
<p>Also, I have put a large number of useful world/country topojson files in this week's data directory. Hopefully this will be what you need for choropleth maps for the project.</p>
<h3 id="map-design-guidelines">Map Design Guidelines</h3>
<p><strong>Never use the rainbow color scheme!</strong> You will lose your data vis license. <a href="https://eagereyes.org/basics/rainbow-color-map" class="uri">https://eagereyes.org/basics/rainbow-color-map</a></p>
<ul>
<li>Map coloring scales in d3: <a href="http://roadtolarissa.com/blog/2015/01/04/coloring-maps-with-d3/" class="uri">http://roadtolarissa.com/blog/2015/01/04/coloring-maps-with-d3/</a></li>
<li>Jenks breaks code you could use from the previous article: <a href="https://gist.github.com/tmcw/4977508" class="uri">https://gist.github.com/tmcw/4977508</a></li>
<li>Colorbrewer, Colors for maps (and other useful palettes for vis): <a href="http://colorbrewer2.org/" class="uri">http://colorbrewer2.org/</a></li>
<li>Thematic Cartography Guide: <a href="http://axismaps.github.io/thematic-cartography/" class="uri">http://axismaps.github.io/thematic-cartography/</a></li>
<li>A related talk from Andy Woodruff of Axis Maps: Blindfolded Cartography: <a href="http://www.axismaps.com/blog/2015/05/blindfolded-cartography/" class="uri">http://www.axismaps.com/blog/2015/05/blindfolded-cartography/</a><br />
and the video at OpenVisConf: <a href="https://www.youtube.com/watch?v=e_00WVa3GJA" class="uri">https://www.youtube.com/watch?v=e_00WVa3GJA</a></li>
<li><a href="https://medium.com/thoughts-on-journalism/a-great-big-guide-to-when-to-use-maps-in-data-visualisation-5661d833ac62#.8ic70uj25" class="uri">https://medium.com/thoughts-on-journalism/a-great-big-guide-to-when-to-use-maps-in-data-visualisation-5661d833ac62#.8ic70uj25</a></li>
<li>When Maps Shouldn't Be Maps: <a href="http://www.ericson.net/content/2011/10/when-maps-shouldnt-be-maps/" class="uri">http://www.ericson.net/content/2011/10/when-maps-shouldnt-be-maps/</a></li>
<li>Hex Tile Maps: <a href="http://blog.apps.npr.org/2015/05/11/hex-tile-maps.html" class="uri">http://blog.apps.npr.org/2015/05/11/hex-tile-maps.html</a></li>
<li>Even more design options: <a href="https://richardbrath.wordpress.com/2015/10/15/equal-area-cartograms-and-multivariate-labels/" class="uri">https://richardbrath.wordpress.com/2015/10/15/equal-area-cartograms-and-multivariate-labels/</a></li>
</ul>
<h2 id="recap-so-far-project-ahead">Recap So Far: Project Ahead</h2>
<p>What have we done so far?</p>
<p><strong>Chart Types:</strong></p>
<ul>
<li>tables, sorting tables</li>
<li>dot plots</li>
<li>bar charts</li>
<li>stacked bar charts</li>
<li>grouped bar charts</li>
<li>scatterplots</li>
<li>line charts</li>
<li>area charts</li>
<li>streamgraphs</li>
<li>small multiples</li>
<li>maps</li>
</ul>
<p><strong>Skills:</strong></p>
<ul>
<li>transitions and animation</li>
<li>new data, data switching/updates</li>
<li>UI: buttons, select menus, tooltips, legends, click events</li>
<li>Next week: scrolling, other storytelling structures, animation</li>
</ul>
<p><strong>Tips for good vis:</strong></p>
<ul>
<li>Small multiples</li>
<li>Getting top 10 (or top N)</li>
<li>Sorting items</li>
<li>Animating things when they change</li>
<li>Annotation/labeling of interesting data points</li>
</ul>
<p>Shneiderman's mantra: "Overview first, zoom and filter, details on demand."</p>
<p>Your project will have to have at least 4 types of graphs we've done in class in it, plus some interactive features such as tooltips, useful animation, some storytelling component. It should be a single page project, as discussed.</p>
<h2 id="recent-interesting-things">Recent Interesting Things</h2>
<ul>
<li>Small multiples in sports in Financial Times: <a href="http://blogs.ft.com/ftdata/2016/03/28/football-premier-league-decline-la-liga/" class="uri">http://blogs.ft.com/ftdata/2016/03/28/football-premier-league-decline-la-liga/</a></li>
<li>How to Make Cartograms with Animation: <a href="http://metrocosm.com/how-to-make-cartograms-with-animation/" class="uri">http://metrocosm.com/how-to-make-cartograms-with-animation/</a></li>
<li>Animated Refugee Map: <a href="http://www.takepart.com/article/2015/10/28/map-that-shows-how-huge-europes-refugee-crisis-really-is?cmpid=organic-share-twitter" class="uri">http://www.takepart.com/article/2015/10/28/map-that-shows-how-huge-europes-refugee-crisis-really-is?cmpid=organic-share-twitter</a></li>
<li>Small multiple maps: <a href="http://www.nytimes.com/interactive/2015/10/31/upshot/who-still-doesnt-have-health-insurance-obamacare.html?src=twr&_r=0" class="uri">http://www.nytimes.com/interactive/2015/10/31/upshot/who-still-doesnt-have-health-insurance-obamacare.html?src=twr&_r=0</a></li>
<li>What Makes a Visualization Memorable: <a href="http://www.storybench.org/understanding-what-makes-a-visualization-memorable/" class="uri">http://www.storybench.org/understanding-what-makes-a-visualization-memorable/</a></li>
<li>Five Design Sheet process: <a href="http://fds.design/" class="uri">http://fds.design/</a></li>
</ul>
<h2 id="homework">Homework</h2>
<p>Read:</p>
<ul>
<li>Noah Veltman's primer on maps and tools, it will help a lot with vocabulary and concepts:<br />
<a href="https://github.com/veltman/learninglunches/tree/master/maps" class="uri">https://github.com/veltman/learninglunches/tree/master/maps</a></li>
<li>Map coloring scales in d3: <a href="http://roadtolarissa.com/blog/2015/01/04/coloring-maps-with-d3/" class="uri">http://roadtolarissa.com/blog/2015/01/04/coloring-maps-with-d3/</a></li>
<li>Don't use rainbow schemes or your data vis license will be revoked: <a href="https://eagereyes.org/basics/rainbow-color-map" class="uri">https://eagereyes.org/basics/rainbow-color-map</a></li>
</ul>
<p><strong>HW 1 (20pts) Map</strong>: Make a map with data for your project data (or another data set if you don't have mappable data). Make it have a legend and tooltips and explain what it's showing. You can use any approach you want - choropleth or dots on a map. There should be a file you can use in my data directory, but if you need someplace special, you might have to hunt online.</p>
<p><strong>HW 2 (10pts) Datasets</strong>: Put your project datasets as CSV into a repo or gist and send me the link. This means getting them out of PDFs. If you already put them into a gist, remind me by resending me that link.</p>
</body>
</html>