I've been trying to get this to work for some time now. The end goal is to produce a map I can show using d3.js, however d3 is butchering the map and producing an undesirable image. The code is as follows:

var width  = 1000;
var height = 800;

var vis = d3.select("body").append("svg")
  .attr("width", width).attr("height", height)

d3.json("ca-ns-all.geo.json", function(json) {
// create a first guess for the projection
  var center = d3.geo.centroid(json)
  var scale  = 150;
  var offset = [width/2, height/2];
  var projection = d3.geo.mercator().scale(scale).center(center)

  // create the path
  var path = d3.geo.path().projection(projection);

  // using the path determine the bounds of the current map and use 
  // these to determine better values for the scale and translation
  var bounds  = path.bounds(json);
  var hscale  = scale*width  / (bounds[1][0] - bounds[0][0]);
  var vscale  = scale*height / (bounds[1][1] - bounds[0][1]);
  var scale   = (hscale < vscale) ? hscale : vscale;
  var offset  = [width - (bounds[0][0] + bounds[1][0])/2,
                    height - (bounds[0][1] + bounds[1][1])/2];

  // new projection
  projection = d3.geo.mercator().center(center)
  path = path.projection(projection);

  // add a rectangle to see the bound of the svg
  vis.append("rect").attr('width', width).attr('height', height)
    .style('stroke', 'black').style('fill', 'none');

    .attr("d", path)
    .style("fill", "red")
    .style("stroke-width", "1")
    .style("stroke", "black")

And the map is defined from the data below


  • Can we please see the Nightmare? Will +1 for that image ...
    – Simbamangu
    Commented Feb 18, 2016 at 17:38

1 Answer 1


Solved it, the data wasn't WGS84. Thanks everyone!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.