¿Cómo puedo representar las coordenadas de latitud y longitud en un mapa con D3?

Estoy tratando de superponer puntos de conjuntos arbitrarios de coordenadas de longitud-latitud en la parte superior de un mapa de Estados Unidos.

Hasta ahora he encontrado el ejemplo de cartografía D3 , pero cuando trato de colocar puntos en las coordenadas de píxel X, Y, aparecen muy lejos del lienzo. Me he encontrado notas workshot conferencias que incluyen sistemas de coordenadas en d3 , pero todavía estoy seguro de cómo conseguir lat / coords tiempo para aparecer en el mapa.

Esto es lo que tengo hasta ahora (casi solo un mapa de los EE. UU.)

¡Se agradecería enormemente el asesoramiento sobre cómo hacer que esto funcione!

— Jay Taylor
fuente

d3 es svg correcto?

— Mapperz

Sí, d3 es svg.

— Jay Taylor

Un buen ejemplo de renderizar svg en el mapa está aquí: github.com/kartograph/kartograph.py/wiki/… usando Path and Measures

— Mapperz

Debe tener una función de proyección () para proyectar los puntos largos y largos en el mapa. Por defecto, una ruta geográfica d3 usa la proyección albersUsa, por lo que puede declararla explícitamente:

var projection = d3.geo.albersUsa();

Verá esto hecho en ejemplos que no usan AlbersUsa, y al definir la proyección puede modificarlo. Tenerlo definido lo hace disponible como una función. De esta manera, podría colocar sus puntos como círculos svg:

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

Eso debería dejar caer un círculo en las cercanías de Nueva York. A continuación, puede vincular datos que tengan los atributos "lat" y "long", en cuyo caso se vería así:

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

La función de proyección toma la matriz [long, lat] y devuelve una matriz [x, y], que encaja perfectamente en la sintaxis transform, translate (), o podría dividir la matriz para los valores x e y.

El siguiente ejemplo coloca polys, líneas y puntos, y toma los puntos de un csv y los proyecta en un mapa, pero observe que transforma el elemento g y agrega un círculo a ese elemento (es posible que también desee una etiqueta u otros aspectos a un sitio, todo lo cual se agregaría a ese elemento g proyectado):

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

— Elijah
fuente