Interactive and Multivariate Choropleth Maps with D3 | Sack | Cartographic Perspectives
▻http://www.cartographicperspectives.org/index.php/journal/article/view/cp78-sack-et-al/1359
Interactive and Multivariate Choropleth Maps with D3
Carl M. Sack, University of Wisconsin–Madison | cmsack@wisc.edu
Richard G. Donohue, University of Kentucky | rgdonohue@uky.edu
Robert E. Roth, University of Wisconsin–Madison | reroth@wisc.edu
ASSUMED SKILLS AND LEARNING OUTCOMES
The following tutorial describes how to make an interactive choropleth map using the D3 (Data-Driven Documents) web mapping library (d3js.org). This tutorial is based on a laboratory assignment created in the fall of 2014 for an advanced class titled Interactive Cartography and Geovisualization at the University of Wisconsin–Madison. This is the second of two On the Horizon tutorials on web mapping and extends a previous tutorial that used the Leaflet JavaScript library (see Donohue et al. 2013; dx.doi.org/10.14714/CP76.1248). Fully commented source code for both tutorials is available on GitHub (github.com/uwcart/cartographic-perspectives). All code is distributed under a Creative Commons 3.0 license and available for unconditional use, with the exception of the files in the lib directory, for which certain license conditions are required as described in the file LICENSE.txt.
This tutorial assumes literacy in JavaScript, HTML, and CSS programming for the web. In particular, you should be comfortable with the manipulation of JavaScript arrays and objects. Free tutorials and reference documentation for these languages are available at www.w3schools.com. Additionally, D3 makes heavy use of jQuery-style DOM element selection and dot syntax (jquery.com). It is further assumed that you are familiar with in-browser development tools such as those provided by Google Chrome (developers.google.com/chrome-developer-tools), Mozilla Firefox (developer.mozilla.org/en-US/docs/Tools), and Firebug (getfirebug.com). An important limitation of D3 is its incompatibility with Microsoft’s Internet Explorer browser prior to version 9; use of Internet Explorer below version 10 is not recommended. Finally, the tutorial assumes you have set up a development server running either remotely or as a localhost. MAMP for Mac (www.mamp.info/en) and WAMP for Windows (www.wampserver.com/en) are useful for this.