More TopoJSON / watershed maps

I played more with the California watershed boundary data and TopoJSON. Two nice treatments, online at least temporarily. A full-state static map in D3 with some mild interaction letting you change the depth of HUC codes used in coloring. And a zoomable map written with Leaflet that while HUC colored, emphasizes watershed boundary details over the hierarchical HUCs.

The Leaflet implementation went pretty well. The one thing that tripped me up is my watershed boundaries are stored as bunch of Geometry objects in a GeometryCollection, instead of Feature objects in a FeatureCollection. Leaflet’s GeoJSON support does nice things with FeatureCollections, letting you change the style and bind a popup for each Feature. It doesn’t seem to do that with GeometryCollections. I worked around it by just iterating through the GeometryCollection and adding each Geometry manually. But I wonder if TopoJSON should be emitting FeatureCollections instead? ogr2ogr on my source .SHP data emitted a FeatureCollection, but topojson generated a topology with an embedded GeometryCollection.

I had to regenerate the TopoJSON for the zoomable map with less simplification. 2.2 MB vs 1.4 MB, and it looks good at reasonable zoom scales. I realized too late I really should have changed the quantization from 10,000 to 100,000; but at this simplification level I can get away with it.

So that’s the result. It’s OK and a useful tool for exploring watersheds, but it’s not awesome. The file size and render times are awfully big. And the presentation is clumsy, I should do more.

Screen Shot 2013-02-19 at 6.01.27 PM Screen Shot 2013-02-19 at 6.01.45 PM

One thought on “More TopoJSON / watershed maps

  1. Thank you for this great post. Watersheds are such great bounding ‘units’…I was tinkering around with them myself recently – thinking about Search and Rescue GIS response. Reviewing your code was helpful in my own attempts to learn d3.js too, cheers

Comments are closed.