Material based on Alexander Lex’s lecture and Scott Murray’s book and lecture by Mike Foster

Maps

Maps, finally! But before we start talking about how to draw maps, a word of caution: maps are heavily over-used. A lot of information that is printed on top of maps would be better of in another type of chart. If we compare data of the five largest cities in the US, we don’t need to do that on a map, everyone knows where New York, Los Angeles, Chicago, Houston, and Philadelphia are, but if we plot this on a map we give up our most important visual channel: position. We’re no longer free to place things where we want!

But let’s get to how we do maps with D3. Generally, there are two approaches:

  1. Street Map with Data: If you want to show something in the context of a real street map, your best bet is to use something like the Google Maps API - here’s an example of how it’s used with D3, or the OpenStreetMap API. You can use D3 to draw things on top of those, but you’ll mainly work with the API provided by the vendor.
  2. Data Maps: If you want to present data on an abstract map, e.g., only showing counties or state borders, D3 is the way to go! We’ll be taking about data maps from now on.

D3 Maps are based on the GeoJSON format (or the TopoJSON variety). The GeoJSON format describes the contained geography as a combination of longitude and latitude coordinates, so that each entry forms a polygon. Here is a sample from the data file containing US states.

 1 {
 2      "type":  "FeatureCollection",
 3      "features":
 4      [
 5          {
 6              "type": "Feature",
 7              "id": "01",
 8              "properties": {"name": "Alabama"},
 9              "geometry": {
10                 "type": "Polygon",
11                 "coordinates": [[[-87.359296, 35.00118], [-85.606675, 34.984749], [-85.431413,34.124869],[-85.184951,32.859696], ...
12  }

You can see that the coordinates are within the geometry object, and that the properties tell us that this is the shape repesenting Alabama.
These polygons can be easily converted into an SVG path with d3.geoPath() (as always, see the API documentation here).

See output in new page.

The previous map uses the geographical information with a default projection. Projections are necessary because the earth is a sphere and can not be directly depicted, without a projection, on a flat surface. There are many projections, with various advantages and disadvantages - we’ll talk about them in class. Let’s center the map and try out a couple:

See output in new page.

There are a lot of map projections implemented in D3. Here is a showreel.

Here is an example for a choropleth map, coloring each state by its agricultural output. The trick here is to join the data about the output to the geography information:

See output in new page.

Here is an example for how we can draw marks on top of maps, in this case the size of cities:

See output in new page.

Transitions

Here is some bonus content about transitions we covered by request:

See output in new page.

Here is an example of animating a line chart:

See output in new page.

Interactions

Here is an example of dragging elements:

See output in new page.

Here is an example of brushing elements:

See output in new page.