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.
var counties = map.append('g') .attr('class', 'counties') .selectAll('path') .data(countylines.features) .enter().append('path') .attr('d', d3.geo.path());
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).
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.
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.