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!


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:

.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/

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.