d3: Introduction and Setup

d3 (Data Driven Documents) has become one of the more popular visualization libraries for the web, allowing the developer to create responsive and interactive graphics with a unique set of data. For a javascript visualization library, it allows for incredible amounts of manipulation and customization, but also has a gigantic user-group that is continually creating examples and other branch tools for making it easier to use.

The incorporation of geographic data into d3’s standard library is the beginning of a bridge between the web and traditional cartography, finding a common medium for aesthetics and true spatial representation to co-exist (i.e. projections beyond the standard Web Mercator and SVG scalability). To me, it’s a window into the future of cartography. But how do you use it?

Beyond the introduction tutorials it is easy to get lost in the code of brilliant developers. It’s not too long before you realize you have no idea how your visualization actually works. At the most basic, it’s tough to understand how d3 actually interacts with all of your data; how your data actually drives the document. So, let’s get started.

How to set up your workstation to use d3

First, get a cup of coffee. There’s no reason not to.

The tools | What I use

  • Text Editor Sublime Text
  • Browser Chrome, FF, IE*
  • D3 Source d3js.org
  • Local Server Environment MAMP (for mac), WAMP (for PC)
  • Coffee FTO

*d3 is not supported on IE8 or below. Why? Because they answer to no one. Also, d3 is new and progressive, which is not the case in many outdated IE8 platforms so they aim for a future of good web standards.

The list above is d3 at its most basic. It doesn’t even include data! Of course, you’ll bring in your own dataset to take advantage of the dynamic qualities of the library, but that doesn’t make it a requirement. Not really sure what a Local Server Environment is? Set up MAMP on your Mac. In short, it will allow d3 to grab specific files or datasets from your directories. Otherwise you’ll run into cross-origin resource sharing issues, which can be a headache. This may not come up in a basic setup, but once you start drawing data from different files, things can get complex.

So now you know the tools, but where to put all the files? Below is a common directory file structure:

d3 file structure

Quite basic, but leaves room for expansion. From here, you’ll want to set up your index file with the following:

<!DOCTYPE html>
<html lang="en">
  <meta charset="utf-8">
  <title>D3 Setup</title>
  <link rel="stylesheet" type="text/css" href="css/style.css"/>
  <script type="text/javascript" src="js/d3.v3.js"></script>
  <script type="text/javascript">
    //d3 code here

You can view your index.html in your browser through your localhost – typically something along the lines of localhost:8888/sites/your_project – and begin taking advantage of d3’s powerful functions. Next I’ll be jumping into d3.geo, the geographic library built within d3 for cartography productions.