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.
More |
---|
• 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.
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.
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 Visual.ly 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.