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 Feb 18 '16 at 17:38

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

|improve this answer|||||

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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