Great small multiples:
Reminder:
Get your data sets in shape -- download, explore, CSV-ify them, start using them.
If your data is in PDF tables, try Tabula: http://tabula.technology/
You were supposed to read Mike's tutorial: http://bost.ocks.org/mike/map/.
He introduces TopoJSON (https://github.com/mbostock/topojson/wiki). Confusingly, this is sometimes a file format, sometimes about command line software, sometimes about the js library.
What is it? It's a simplification format for map data that reduces the file size of GeoJSON data. 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.
There are some non-command line tools now for working with Topojson (including creating it from GEOJSON files):
Let's look at this too:
There are some more tools for non-command-line work in the Map Tools section below.
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.
Now let's look at africa_map.html first. That's a simple map of borders using TopoJSON of the continent.
Then africa_map2.html -- look how we get to the actual country features.
Now let's look at coloring the world by regions in world_map_regions.html and discuss.
Choropleths are thematic maps colored according to a data values associated with regions. This is probably what you will need for your project.
There ARE some ways to get such maps without much work - use CartoDB, for instance.
See carto_db_example.html and demo on cartoDB. (Also others in the Tools section.)
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 simple_us_states_data.html), or use some kind of key to relate the two (like ISO code), as in world_comparisons.html. 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 simple_us_states_data.html.
Example africa_map3.html introduces a bunch of new useful stuff:
Finally, here's a fully interactive map with multiple data sets and tooltips, from Flowing Data:
Any design suggestions? How would you improve the tooltips?
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.
Use of the Albers projection for the USA gives you Alaska and Hawaii in a nice location.
Also, coloring states:
Using a click-event to change data shown (plus a nice tooltip):
For county and state id's, see this list: https://www.census.gov/econ/cbp/download/georef02.txt The "id" in the us topojson file I've given you is the FIPS code for the state and county.
The State ID is the first 2 digits. How would we filter for a single state and country?
We can use our projection([lon, lat]) to position things on a map.
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);Often you will want to trigger actions off charts or maps on click.
An example is in africa_map_clicker.html. Of course, the div with the tooltip-like text could instead be another chart!
Notice how important the moveToFront() is for the map mouseover!
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.
We can do it using markers in leaflet.js. Here's a nice Ratmap using leaflet and d3: http://benjmyers.com/ratmap/#/
Here's an example rat map using Leaflet and leaflet markers:
See the example in us_states_data_leaflet.html -- choropleth plus dots on a leaflet underlayer.
Some tools assume [lon, lat] and others want it the other way.
D3 wants [lon, lat]. Leaflet wants [lat, lon].
Read this: http://www.macwright.org/lonlat/
(Thanks to Noah Veltman's post here: http://mapstarter.com/)
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.
Never use the rainbow color scheme! You will lose your data vis license. https://eagereyes.org/basics/rainbow-color-map
What have we done so far?
Chart Types:
Skills:
Tips for good vis:
Shneiderman's mantra: "Overview first, zoom and filter, details on demand."
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.
Read:
HW 1 (20pts) Map: 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.
HW 2 (10pts) Datasets: 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.