Making Maps with D3


D3 is a JavaScript data visualization library using HTML, SVG and CSS.  D3 stands for Data Driven Documents and was developed by  Mike Bostock, Jeff Heer and Vadim Ogievetsky as a successor to the Protovis framework.

Making maps with D3

The 3.0 release of D3 now includes a geographic projection system.  Common geographic projections are included in the default build of D3 such as Albers, Gnomic, and Mercator.  Additional geographic projections can be accessed via the extended geographic projections plugin and the polyhedral projection plugin.  Over forty different projections are support by the default D3 build and geographic projection plugin. The Geo Projections page has a listing of projections with links to sample pages and code.

Open Source GIS
Making Maps with R

There are a host of other geographic data visualization plugins that extend the capabilities of making maps with D3.  For example, the d3.hexbin plugin enables hexagonal bining.  In the example map below, hexagonal binning is used to display and categorize 3,000 locations of Walmart stores in the lower 48 states of the U.S.  Median store age is shown by color with black for older stores and blue for younger store locations.

Hexagonal binning map showing the locations of 3,000 Walmart stores in the United States.

Hexagonal binning map showing the locations of 3,000 Walmart stores in the United States. Click on map for D3 page.

Examples of D3 Maps

There are a few pages interested users can browse to see examples of D3 in use showing a range of data visualization techniques.  Mike Bostock, who now works for the NY Times has several sample pages.  To see in use examples by the NY Times, visit Mike Bostock’s launch page for some of his D3 work.  Included are some of the amazing post election results maps from the 2012 presidential election such as the Counties Blue and Red, Moving Right and Left map.  mbostock’s blocks also has pointers to a wide range of data visualization examples as does the D3 Gallery.  Jens Finnäs, a Finnish journalist has some interesting D3 mapping examples on his dataist blog such as his map of the Occupy Wallstreet movement over time.

Map of Occupy Wallstreet

Tutorials for Making Maps Using D3

The tutorials page on the D3 wiki provides access to a range of instructions on getting started with D3.  Mike Bostock has a tutorial on basic map making using D3 and TopoJSON in his tutorial, “Let’s Make a Map.”  The tutorial steps you through finding GIS data, loading the data, and symbolizing the polygons and adding labels.

EJ Fox has a tutorial on the blog about how to make a choropleth map in D3 using Google’s JSON data of the 2008 presidential election. as the example. Alex Rothenberg also uses 2008 Presidential Election data to create an interactive map by combining D3 with Ember.


Like this article and want more?

Enter your email to receive the weekly GIS Lounge newsletter: