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

Question

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

#1 de Elijah (14 votos)

16

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 intento colocar puntos en X , Y las coordenadas del pixel aparecen fuera del lienzo. Encontré notas de lectura de trabajo que incluyen sistemas de coordenadas en d3 , pero todavía no estoy seguro de cómo obtener lat / Coords largos para aparecer en el mapa.

Esto es lo que tengo hasta ahora (prácticamente solo un mapa de los Estados Unidos)

¡El consejo sobre cómo hacer que esto funcione sería muy apreciado!

cartography maps latitude-longitude d3

pregunta Jay Taylor 02.10.2012 - 19:35

1 respuesta

Lea otras preguntas en las etiquetas cartography maps latitude-longitude d3

¿Cómo agregar atributos de funciones personalizados a Shapefile usando Python? ¿Cómo crear un GeoJSON que funcione con D3?

score 14 · Answer 1

Necesitas tener una función de proyección () para proyectar la latitud y longitud de tus puntos en el mapa. De forma predeterminada, una ruta geo d3 utiliza la proyección albersUsa, por lo que podría 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 usted 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 caer un círculo en las proximidades de Nueva York. Luego, podría vincular los datos que tenían 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 de transformación, traslación (), o podría dividir la matriz para los valores de x e y.

El siguiente ejemplo coloca polis, líneas y puntos, y toma los puntos de un csv y los proyecta en un mapa, pero observa que transforma el elemento g y agrega un círculo sobre ese elemento (es posible que también quieras una etiqueta u otros aspectos de un sitio, todos los cuales se agregarían a ese elemento g proyectado):

enlace http://bl.ocks.org/d/4414107/