D3 Map

Installing

First step was prerequisites.

Prerequisites

I had to install GDAL (software for converting different geographic formats) and NPM (node package manager):

brew install gdal
brew install npm

Next, I used npm to install TopoJSON:

npm -g topojson

Then I checked that the installations went ok with:

which ogr2ogr
which topojson

Converting

GeoJson to TopoJson

To convert a GeoJson to a TopoJson and preserve properties:

topojson in.geojson -o out.json -p

Once I converted my GeoJson into TopoJson I was ready to start creating a map from it in D3.

D3 for Maps

I started with a basic map tutorial from Mike Bostock, creator of D3: http://bost.ocks.org/mike/map/

Initially I wasn't able to get it working, but it was because I was using GeoJson. Switching to TopoJson helped me make sense of some of the Javascript - there's a lot that's happening implicitly even in the simplest D3 examples. Opening the TopoJson to understand its structure and keys, how properties were stored in it, made the D3 more clear.

Here is the final map created for the tutorial: http://bost.ocks.org/mike/map/step-7.html

The main point that gave me trouble was figuring out the projection. With Leaflet, I can pass latitude and longitude to center the map on my region of interest. But this wasn't possible (or, more likely, I couldn't figure out how to do it) with D3.

I ended up using a US projection, which led to this funny rotation of California, out there on the left coast:

When I tried rotating or transforming it, it would disappear for any setting more than very tiny numbers, and it is really inefficient to position a map like you draw with an etch-a-sketch. Need to figure out how to use latitude and longitude. And maybe how to add tiles?