Live Coding D3.js

Making maps in D3.js

With a little bit of practice, map making in d3.js can be as easy and intuitive as other GIS platforms. Maps serve many purposes in both research and outreach. They provide specific information about particular locations, can be used to showcase spatial patterns and relationships, and give context to the data presented. There are a few approaches to generate map(s) in d3.js, but we walk through some simple tips for beginners.

Before we get started, let's return back to our svg example from Part 1 and explore an addition functionality, transform. Transforming allows you to redefine the coordinate system of the SVG elements. This is particularly useful in interactive mapping.

By altering the transform attribute of the svg, D3 can allow users to zoom and drag elements of your data visualizations.

Now that we have a better understanding of the transform attributes of svg, we can begin to build a map using D3.

Getting Map Data

There are a large collection of geospatial files (e.g., shapefiles, kml, etc.) online. Here is a quick list of places I like to go for these files.

• Natural Earth
• US Atlas
• SFgov.org
• Federal Highway Administration
• US Atlas in d3.js
• Census Bureau
• National Oceanic and Atmospheric Administration (NOAA)
• ScienceBase Catalog

Geographic data files, such as shapefiles, are too large to display and manipulate in internet browsers. For this reason, a large portion of your time creating a map will be retrieving and processing data. The d3.js library supports multiple data formats, but the two most commonly used are CSV and JSON.

• CSV
• JSON

The goal is then to manage and process your geographic data into these useful filetypes. Luckily, there are many helpful data processing tools available on the web. Mike Bostock presents a great introduction to creating maps using the Geospatial Data Abstraction Library (which includes OGR Simple Features Library and ogr2ogr ). I highly encourage you to read more about GeoJSON and Mike's TopoJSON data formats. For now, just know that these are the two measures needed to convert shapefiles into smaller, more manageable filetypes.

I like to manipulate my files locally - but you do not have to do this! Instead, you can use online data processing services, like mapshaper.org, to reduce the file sizes of your spatial data.