dimensionando projeções d3.js

Question

Estou tentando desenhar um mapa de Nova York usando d3.Eu baixei vários shapefiles de http://www.nyc.gov/html/dcp/html/bytes/dwndistricts.shtml.Eu os converti para geoJSON usando http://converter.mygeodata.eu/, de modo que estejam no WGS 84 (também conhecido como latitude e longitude).

Tenho certeza que o geoJSON é válido:Posso plotá-lo usando matplotlib e parece Nova York, e os números parecem estar em um intervalo válido.Aqui está meu javascript:

var path = d3.geo.path()
d3.select("body")
  .append("svg")
    .attr("height", 1000)
    .attr("width", 1000)
  .append("g")
  .selectAll("path")
  .data(data.features)
  .enter()
  .append("path")
    .attr("d", path)
    .style("stroke","black")
    .style("stroke-width","1px")

Isto representa, conforme anunciado, a projeção de Albers de Nova York.O problema, creio eu, é que a escala da projeção é escolhida de forma que os EUA caibam em uma bela página da web, fazendo com que os caminhos para Nova York fiquem um pouco ondulados no lado direito da tela.

Qual é a maneira 'correta' (deixe-me tentar afirmar ser o primeiro a dizer d3onic) para dimensionar um geo.path() de modo que as extensões da minha lat/lon sejam dimensionadas na largura e altura do meu SVG?

(pequeno aviso:desculpas se perdi algo óbvio, isto é para um projeto que estou tentando concluir no final do dia)

Answer 1

Primeiro, você deseja criar uma projeção e atribuí-la ao d3.geo.path, para poder personalizar as configurações da projeção.

var albers = d3.geo.albers(),
    path = d3.geo.path().projection(albers);

A projeção padrão é d3.geo.albersUsa, que na verdade é uma projeção composta (com quatro áreas descontínuas diferentes) projetada para mostrar os 48 estados, Alasca, Havaí e Porto Rico.Ah, etnocentrismo.;)

Use o exemplo de alber no repositório git para determinar as configurações de projeção corretas de forma interativa.As configurações que você precisa definir são:

• a origem deve ser a latitude e longitude de Nova York (talvez 73,98°, 40,71°)
• a tradução deve ser o centro da sua área de exibição (então, se você estiver desenhando algo de 960×500, poderá usar o padrão 480.250;esta será a localização do pixel da origem)
• a escala é um número que especifica quanto aumentar o zoom;como você está desenhando um mapa em escala de cidade, provavelmente deseja um valor mais próximo de 10.000

Por último, você precisará escolher alguns paralelos.Você pode usar os padrões fornecidos por d3.geo.albers(), mas pode haver outros mais adequados para Nova York.Possivelmente verifique com o USGS, porque eles frequentemente publicam paralelos padrão para diferentes áreas do mapa.