Problems converting from shape to topojson

Question

I\'m trying to convert a shapefile of mexican municipalities into a topojson and displaying it using d3.js using this tutorial http://bost.ocks.org/mike/map/#converting-data. I\

Answer 1

The simplest option, if you aren’t particular about the projection, is to just use the projection provided by the shapefile (Lambert Conformal Conic). Use topojson’s --width and --height command-line flags to rescale the projected shapefile to a reasonable size. For example, if you want something 960px wide, you could say:

topojson --width=960 --margin 20 --simplify=.1 -o mx.json -- municipalities.shp

(This also simplifies in screen coordinates, conveniently.)

A full example with a Makefile is at bl.ocks.org/9265467:

If, on the other hand, you want to specify your own projection, then it’s reasonable to use ogr2ogr to undo the projection, and then define a projection in the browser. But in that case, you’ll want to specify the projection parameters appropriately. For example, to recreate the same projection in the browser, you can say:

var projection = d3.geo.conicConformal()
    .rotate([102, 0])
    .center([0, 24])
    .parallels([17.5, 29.5])
    .scale(1850)
    .translate([width / 2, height / 2]);

(Fiddle with the center and scale as you like to fit your desired viewport.) This alternative approach is demonstrated at bl.ocks.org/9265674:

I generally prefer using projected coordinates (the first approach, above), as they are faster to render and simplification is more efficient. On the other hand, if you want to change the projection dynamically — admittedly unlikely with such a complex shapefile — then projecting in the browser is the way to go. And projecting in the browser is nice during development because it’s easier to change the parameters and reload.