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)
*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:
Quite basic, but leaves room for expansion. From here, you’ll want to set up your index file with the following:
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.