escalando proyecciones d3.js

Question

Estoy tratando de dibujar un mapa de NYC usando d3. He descargado un montón de shapefiles desde http://www.nyc.gov/html/dcp/html/bytes/dwndistricts.shtml. Los he convertido a geoJSON usando http://converter.mygeodata.eu/, de modo que están en WGS 84 (también conocido como, latitud y longitud).

Estoy bastante seguro de que el geoJSON es válido: puedo trazarlo usando matplotlib y parece NYC, y los números parecen estar en un rango válido. Aquí está mi 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") 

Esta parcelas, como se anuncia, la proyección de Albers de Nueva York. El problema es, creo, que la escala de la proyección se elige para que los EE. UU. Coincidan con una buena página web, haciendo que los recorridos para NYC sean un pequeño garabato en el lado derecho de la pantalla.

¿Cuál es la forma "correcta" (por ejemplo, intentar afirmar que es el primero en decir d3onic) para escalar un geo.path() de modo que las extensiones de mi latitud/lon escalen en el ancho y la altura de mi SVG?

(cierta responsabilidad, disculpas si me he perdido algo obvio, esto es para un proyecto que estoy tratando de completar en los extremos del día)

Answer 1

En primer lugar, tendrá que crear una proyección y asigne eso a d3.geo.path para que pueda personalizar la configuración de proyección.

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

La proyección por defecto es d3.geo.albersUsa, que es en realidad una proyección compuesta (con cuatro áreas discontinuas diferentes) diseñado para mostrar los 48 estados, Alaska, Hawai y Puerto Rico. Ah, etnocentrismo. ;)

Utilice albers example en el repositorio de git para determinar la configuración de proyección correcta de forma interactiva. Los ajustes que necesita configurar son:

• el origen debe ser la latitud y longitud de la ciudad de Nueva York (quizás 73.98 °, 40.71 °)
• el traducir debe ser el centro de su área de visualización (por lo que, si estás dibujando algo 960 × 500, puede usar el 480,250 predeterminado; esta será la ubicación de píxeles del origen)
• la escala es un número que especifica cuánto acercar; ya que está dibujando un mapa a escala de la ciudad, es probable que desee un valor como 10000

Por último, tendrá que elegir algunos paralelos. Puede usar los valores predeterminados proporcionados por d3.geo.albers(), pero puede haber otros más adecuados para NYC. Posiblemente consulte con el USGS, ya que a menudo publican paralelos estándar para diferentes áreas del mapa.