Como renderizar coordenadas de latitude-longitude em um mapa com D3?

16

Estou tentando sobrepor pontos de conjuntos arbitrários de coordenadas longitude-latitude em cima de um mapa dos Estados Unidos.

Até agora, encontrei o exemplo da cartografia D3 , mas quando tento colocar pontos nas coordenadas X e Y, elas aparecem bem fora da tela. Encontrei notas de aula de fotos de trabalho que incluem sistemas de coordenadas no d3 , mas ainda não tenho certeza de como as cordas lat / long aparecem no mapa.

Isto é o que eu tenho até agora (praticamente apenas um mapa dos EUA)

Os conselhos sobre como fazer esse trabalho seriam muito apreciados!

cartography latitude-longitude maps d3 Jay Taylor
fonte
d3 svg está correto?
Mapperz
Sim, d3 é svg.
Jay Taylor
1
Um bom exemplo de renderização SVG ao mapa está aqui - github.com/kartograph/kartograph.py/wiki/... usando Path e Medidas
Mapperz

Respostas:

15

Você precisa ter uma função projection () para projetar o lat e o long de seus pontos no mapa. Por padrão, um caminho geográfico d3 usa a projeção albersUsa, para que você possa declará-lo explicitamente:

var projection = d3.geo.albersUsa();

Você verá isso em exemplos que não usam o AlbersUsa e, ao definir a projeção, você pode modificá-lo. Tê-lo definido o torna disponível como uma função. Dessa forma, você pode colocar seus pontos como círculos svg:

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

Isso deve dar um círculo nas proximidades de Nova York. Em seguida, você pode vincular dados que tenham o "lat" e o "long" como atributos; nesse caso, eles serão assim:

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

A função de projeção pega uma matriz [long, lat] e retorna uma matriz [x, y], que se encaixa perfeitamente na sintaxe de transformação, translate (), ou você pode dividir a matriz para os valores x e y.

O exemplo abaixo coloca polys, linhas e pontos e pega os pontos de um csv e os projeta em um mapa, mas observe que ele transforma o elemento g e acrescenta um círculo a esse elemento (você também pode querer um rótulo ou outros aspectos a um site, todos os quais seriam anexados ao elemento g projetado):

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

Elijah
fonte