GeoJSON D3 TopoJSON – Conversion from Shapefile to TopoJSON Format Results in Incorrect Map When Rendered Using d3js

canadad3geojsontopojson

I am trying to build a map of Canada showing FSA boundaries using d3js. I got shape data from Statistics Canada [http://www12.statcan.gc.ca/census-recensement/2011/geo/bound-limit/bound-limit-2011-eng.cfm].

To convert the SHP file to topojson, I am following the process from Mike Bostock's Tutorial 'Lets Build a Map' [http://bost.ocks.org/mike/map/].

First convert the map to GeoJSON using ogr2ogr, then using topojson in Node.js, convert the GeoJSON file to a TopoJSON file.

I am executing the commands:

> ogr2ogr -f "GeoJSON" -s_srs EPSG:21781 -t_srs EPSG:4326 output.geojson input.shp

Followed by the command:

 > topojson --id-property CFSAUID -p name=PRNAME -p name -o output.topojson output.geojson

The resulting map that is generated renders some provinces properly, however, the following provinces show up as jumbled lines.

  • Ontario
  • Newfoundland
  • Quebec
  • Manitoba
  • Saskatchewan
  • Alberta
  • British Columbia

Here is a basic version of my d3 call.

var g = svg.append("g").attr("id", "fsa");
d3.json("can/output.json", function (error, json) {
    var counter = 0;
    var subunits = topojson.object(json, data);
    g.selectAll("path")
    .data(subunits.output)
    .enter()
    .append("path")
    .attr("d", path)        
});

Best Answer

The default projection in D3 is the U.S.-centric d3.geo.albersUsa projection. This is a composite projection design to display the 48 contiguous United States, Hawaii, Alaska and Puerto Rico. If you want to make a map of Canada, you’ll have to specify the appropriate projection rather than relying on the default.

Related Question