0

I'm trying to plot a bunch of points on a map of the US in d3 and the plot locations are just a bit off from where they should be based on lat-long.

I'm using https://d3js.org/us-10m.v1.json to draw the state borders, which I understand (from this https://github.com/topojson/us-atlas#us/10m.json) to be based on d3's geoAlbers projection. So I'm using d3's geoAlbers projection to plot the lat-longs of the points, but they're not plotting in the correct places (see jsfiddle, with Boston plotting in upstate NY). I suspect the problem has something to do with the projections, but I can't put my finger on it.

JSFiddle: https://jsfiddle.net/Robmattles/n1cdxkna/12/

var width = 960; var height = 600;

var projection = d3.geoAlbersUsa();

var path = d3.geoPath();

var svg = d3.select("#map").append("svg")
    .attr("width", width)
    .attr("height", height);

d3.json("https://d3js.org/us-10m.v1.json",function(error,us) {
      states = topojson.feature(us, us.objects.states).features
    svg.append("g")
      .attr("class", "states")                  
      .selectAll("path")
      .data(states)
      .enter()
      .append("path")
      .attr("d", path)
      .style('fill','yellow')

svg.append("path")
      .datum(topojson.mesh(us, us.objects.states, function(a, b) { return a !== b; }))
      .attr("class", "mesh")
      .attr("d", path);

    svg.append("circle")
    .attr("cx", function() { return projection([-71.0589,42.3601])[0];})
    .attr("cy", function() { return projection([-71.0589,42.3601])[1];})
    .attr("r",6)
    .attr("class","source-port");

svg.append("text")
    .attr("x", function() { return projection([-71.0589,42.3601])[0] + 5;})
    .attr("y", function() { return projection([-71.0589,42.3601])[1] + 0;})
    .text("Boston");


});
Robmattles
  • 63
  • 1
  • 9
  • 1
    Try a topoJSON or geoJSON that is not already projected: https://stackoverflow.com/questions/45067554/circles-in-map-displayed-incorrect-location-in-d3-v4 – Ryan Morton Apr 10 '18 at 17:41
  • I've updated the answer in the question that Ryan has linked to compare the projected topojson with a d3.geoAlbersUsa projection and how to align them, but using all unprojected data or all pre-projected data makes things easier when manipulating maps. – Andrew Reid Apr 10 '18 at 18:39
  • Thanks Andrew (and thanks for your great answer on the other question). Don't know how I missed that when I was researching the other day – Robmattles Apr 11 '18 at 12:10

0 Answers0