d3.js projection (albersUsa) mapping incorrectly
d3.js, data-visualization, gis
Solution
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°.
Problem
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?