How can I render latitude-longitude coordinates on a map with D3?

Question

I am trying to overlay dots of arbitrary sets of longitude-latitude coordinates on top of a United States map.

So far I have found the D3 cartography example, but when I try to place dots on X,Y pixel coordinates they appear way off the canvas. I did find workshot lecture notes which include coordinate systems in d3, but I'm still unsure of how get lat/long coords to show up on the map.

This is what I have so far (pretty much only a map of the USA)

Advice on how to make this work would be greatly appreciated!

Answer 1

You need to have a projection() function to project the lat and long of your points onto the map. By default, a d3 geo path uses the albersUsa projection, so you could declare it explicitly:

var projection = d3.geo.albersUsa();

You'll see this done in examples that don't use AlbersUsa, and by defining the projection you can modify it. Having it defined makes it available as a function. This way you could place your points as svg circles:

svg.append("circle").attr("r",5).attr("transform", function() {return "translate(" + projection([-75,43]) + ")";});

That should drop a circle on the rough vicinity of New York. You could then bind data that had the "lat" and "long" as attributes, in which case it would look like this:

 svg.selectAll("circles.points")
.data(yourData)
.enter()
.append("circle")
.attr("r",5)
.attr("transform", function(d) {return "translate(" + projection([d.long,d.lat]) + ")";});

The projection function takes [long,lat] array and returns a [x,y] array, which fits fine into transform,translate() syntax, or you could split the array for x and y values.

The example below places polys, lines and points, and takes the points from a csv and projects them onto a map, but notice that it transforms the g element and appends an a circle onto that element (you might also want a label or other aspects to a site, all of which would be appended to that projected g element):

https://gist.github.com/4414107 http://bl.ocks.org/d/4414107/