CODEWITHSUNDEEP
gisdata-visualizationd3.js
Brian Hicks
Brian Hicks

Reputation: 6403

d3.js projection (albersUsa) mapping incorrectly

I'm mapping points on a map using the following code:

var width = 960, height = 500, centered, data;

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

var projection = d3.geo.albersUsa().scale(width).translate([width / 2, height / 2]);
var path = d3.geo.path().projection(projection);

var states = svg.append("g")
    .append("g")
      .attr("id", "states")
d3.json("usstates.min.geojson", function(json) {
    states.selectAll("path")
          .data(json.features)
        .enter().append("path")
          .attr("d", path);
});

var points = svg.append("g")
      .attr("id", "points");

// Bentonville, Arkansas is at 36.3728, 94.2086
bvCoords = projection([36.3724, 94.2216]);
console.log(bvCoords)

points.append("svg:circle")
    .attr("cx", bvCoords[0]).attr("r", 100).attr("cy", bvCoords[1])
    .style("fill", "#F00");

When I load that in Chrome, console reports [114.03316181053958, -15.872634684617708], which would be somewhere off the western coast of Canada. If I add .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")") to the points.append call, it's somewhere in southern Indiana.

What am I doing wrong with this projection?

Upvotes: 3

Views: 1519

Answers (1)

Jason Davies
Jason Davies

Reputation: 4693

Your coordinates are the wrong way around: D3 uses the more "mathematical" conventional ordering of [longitude, latitude] ↦ [x, y].

Geographic coordinates are commonly given as latitude, longitude (e.g. 36° 22′ 0″ N, 94° 12′ 48″ W for Bentonville, Arkansas), which would be [-94.2216, 36.3724]: also note the negative longitude because it's West of 0°.

Upvotes: 10

Related Questions