Mapping with D3

Trying out D3's geographic features.

Hover over a county:

There's nothing special about this map. It's just US counties and states, with minimal interaction. I wanted to try out D3's mapping capabilities, and this made for good practice.

The Good

Creating a simple map in D3 is remarkably easy. Assuming you have a GeoJSON, drawing a path is as simple as:

var counties = map.append('g')
    .attr('class', 'counties')
  .selectAll('path')
    .data(countylines.features)
  .enter().append('path')
    .attr('d', d3.geo.path());

Where countylines is a GeoJSON object and map is an SVG selection. Do the same for statelines and style everything with CSS (including hover state, which is just a pseudo-class).

The Bad

GeoJSON files can be big, and loading them can take ... awhile. In my first attempt at a simple map, I used a Census shapefile, converted to GeoJSON using ogr2ogr. That file weighed in at 23.42 megabytes. Yes, megabytes. I eventually switched to the stripped down US counties file hosted on bl.ocks.org. Of course, it doesn't have any interesting data with it, which is part of why this map is so plain.

One possible solution to this is TopoJSON. Data can also be loaded separately in a CSV file and joined to geomtries client-side.

The Ugly

Mapping is still hard. The fact that it's gotten easier, and keeps getting easier, to make a simple map doesn't take away from the skills required to make a decent visualization. I'm still trying to figure out what colors to use where, how to honestly represent certain kinds of data, when to use a map at all. But the barriers are definitely getting lower. More of this soon.