D3 Mapping and Final Project Check-In

Overview

Today, we'll explore some key elements in mapping with D3. We'll touch on the foundational skills of acquiring and converting geospatial files to different formats, and then focus on the elements of building a choropleth map in D3.

In class today, we'll dissect a choropleth map of U.S. unemployment rates from the D3.js Cookbook.

For our class review of map code, please clone the repo and fire up a test server to display the map:

git clone [email protected]:NickQiZhu/d3-cookbook-v2.git
cd d3-cookbook-v2/ 
python -m http.server
# Or if above doesn't work, try
# python3 -m http.server

Next, go to http://localhost:8000/src/chapter12/choropleth.html

This map illustrates some basic techniques for building a choropleth map. Mapping (in D3 or otherwise) is a big topic, so we've included links below to resources that can help you keep learning.

We'll devote any remaining class time to hands-on work for the final project.

Acquiring geospatial data

Acquiring and converting geospatial data to a suitable format for use in D3 (or other mapping tools) is a critical skill.

There are many sources for geospatial files. Here's a list to get you started:

• Census Tiger/Line Shapefiles are a great starting point for U.S. geospatial data. Census also offers other geospatial formats such as KML and ESRI geodatabase files.
• NaturalEarth is a public domain set of vector and raster maps that include features such as administrative boundaries (states, city locations, etc.).
• Academic institutions such as the Stanford Geospatial Center offer training and data.
• Government agencies often provide base maps that include parcel boundaries and other useful geographic features (e.g. Santa Clara County GIS Map Data).

Check out the the Stanford Geospatial Center's Spatial Data Resources for more links.

Converting geospatial data

Once you've acquired data for a map, it's often necessary to convert the data to geojson or, better yet, topojson for use in a D3 map. The latter is a light-weight geospatial format that will improve the performance of the map visualization.

A popular command-line tool for converting geospatial data between formats is ogr2ogr, part of the gdal library.

For Mac users, here are the steps for installing gdal and converting a Census shapefile to geojson:

• Install Homebrew
• Use Homebrew to install gdal so we have access to ogr2ogr command-line tool: brew install gdal
• Download Census TIGER/Line Block Group Shapefile for San Francisco County
• Unzip the shapefile
• cd into the unpacked directory
• Convert .shp -> .geojson:

ogr2ogr -f GeoJSON -t_srs crs:84 sfblockgroups.geojson tl_2010_06075_bg10.shp

Mapping in D3

D3 shines in the area of mapping due to its use of underlying web technologies such as SVG. Mapping in D3 requires a grasp of SVG Path elements and transformations using Groups, as well as familiarity with general mapping concepts such as projections.

Below are some resources for D3 mapping:

• Data-to-viz choropleth maps - provides a step-by-step walk-through, along with details on other map types such as bubble, cartogram, connection and hexbin
• Learning D3.js Mapping and code
  • Using the Path element
  • Grouping
  • Foundation - creating your basic map - provides a straight-forward walk-through of the basics such as reading and understanding geojson data, bounding boxes, and setting scales
  • Creating choropleths - demonstrates how to color map shapes based on data
• D3.js Cookbook and code
  • Project the US map - covers basic map projection, introduces geojson and topojson, and demonstrates how to integrate a zoom feature
  • Building a choropleth map - demonstrates how to shade a U.S. map using unemployment data. The code nicely illustrates how to knit together geospatial data with a secondary data source.
• Command-Line Cartography by Mike Bostock is a more advanced, 4-part tutorial that walks through the process of creating a thematic map of California. It provides detailed instructions on using a suite of command-line tools to wrangle Census geospatial files into a form suitable for a D3 thematic map. (note: many of the Census links are now broken).