Random lines when loading a TopoJSON file in D3

Question

I'm trying to display the Italian cartographic shapefiles, for example this one, using D3.js

I can load the Zip file on MapShaper, look at the map, simplify it and export to TopoJSON. I can load back the TopoJSON in MapShaper and it still looks ok.

But when I try to display it using D3.js, I get a bunch of spaghetti:

Beauty, isn't it?

The code is taken straight from the examples. The projection center, rotation, and parallels are supposed to be the canonical ones for Italy, but it doesn't really matter: the map remains spaghetti-like with any choice of projection.

width = 600
height = 1200

projection = d3.geo.albers()
    .center [0, 41]
    .rotate [347, 0]
    .parallels [35, 45]
    .scale 2000
    .translate [width / 2, height / 2]

path = d3.geo.path()
    .projection projection

svg = d3.select "body"
    .append "svg"
    .attr "width", width
    .attr "height", height

d3.json "Reg2011_ED50.json", (json) ->
    svg.append "path"
        .datum topojson.feature json, json.objects.Reg2011_ED50
        .attr "d", path

What am I doing wrong?

Answer 1

I found an old mailing list post detailing how to import those exact files.

Basically I needed to convert the projection to a standard one with this command:

ogr2ogr -t_srs EPSG:4326 converted.shp original.shp

I don't understand why it's needed: I thought the .prj file took care of projection differences. Apparently not.