score:1

Accepted answer

You don't mention where your coordinates are coming from, but I suspect they are based on GIS (x, y, z) format, so the order is [longitude, latitude]. This will cause your image to be "rotated" -- if you reverse the x/y values, that should help. There is a good discussion about the evolution of these different coordinate systems (navigation vs. graphing) on this SO thread.

Also, the path you are generating appears to be "flipped" vertically. I can't tell you how many times I've done that, because the page's coordinate system is not what most of us expect. The upper-left corner is (0, 0), and the y-values increase down the page. The most intuitive way (for me) is to invert the y-axis's output range -- one way is like this:

var yScale = d3.scale.linear()
    .domain([minY, maxY])
    .range([height, 0]);

That way, the minimum y-coordinates (i.e. latitude, in your case) are mapped to the bottom of the SVG area (the "height" variable), while the maximum values are mapped to 0 (the top of the screen).


Related Query

More Query from same tag