My First Geo D3


At least since JS.Geo13, all the cool web-mapping geo-kids have been talking about D3.js. I’ve seen it from afar for a while now, and this morning I decided to jump in. Here is my first geographic stab at using D3 (technically, I used D3 to make my previously posted wordcloud, but I basically just copied that code from somewhere else). The map “simply” cycles through five projections, which is pretty amazing considering how easy it was to code vs. the magic that’s been built into D3.

Honestly, the most difficult thing was the journey from ArcGIS file gdb feature class to GeoJSON. Here’s how I did it:

  1. ArcGIS: Feature to Line, simplify (I used 10km as the tolerance), save as shapefile.
  2. QGIS: convert shapefile to GeoJSON using OGR Layer Converter plugin (could I do this in ArcGIS?) Can also simply “Save As…” GeoJSON.

Also, I use a GoDaddy server, and had to add a line to my web.config file in order to load JSON files. For the record, I find this type of finicky business extremely annoying (I’m sure there’s a good reason for it, I just don’t care). Don’t tell me, “Cannot load JSON”, just load it! Here’s the line:

<mimeMap fileExtension=”.json” mimeType=”application/json” />

Some questions for the D3 geeks out there: How do I auto-center the view on the given SVG shape? I used trial and error to come up with the translations. Ditto for scale. Is there a way to fire animations in linear order, rather than hardcoding delay times? Or should that be done with the data array? Any help and guidance is greatly appreciated!

In summation, I’m starting to see what all the hype is about and it’s exciting. D3 promises to be a fresh alternative to mercator-based slippy maps.

edit: I started using ShiftEdit, an online IDE. I like it – hooks up nicely via FTP to my web server, available anywhere, good intellisense (at least for my purposes). I’m interested to know if you use a different online IDE. Let me know.

edit: in order to get this to work properly in Firefox, it was necessary to explicitly set the dimensions of the SVG element. Not so in Chrome.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s