Scaling forecasts d3.js

Question

I am trying to draw a map of New York using d3. I downloaded a bunch of shapefiles from http://www.nyc.gov/html/dcp/html/bytes/dwndistricts.shtml . I converted them to geoJSON using http://converter.mygeodata.eu/ so that they are in WGS 84 (otherwise, I think, latitude and longitude).

I'm sure geoJSON is valid: I can build it using matplotlib, and it looks like NYC, and the numbers seem to be in a valid range. Here is my 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") 

These stories were announced to be Alberts New York projection. I think the problem is that the projection scale is chosen so that the United States approaches a beautiful web page, which makes NYC tracks a little distorted on the right side of the screen.

What is the “right” way (for example, to try to claim that d3onic first said) to scale a geo.path() so that the extents of my lat / lon scale are the width and height of my SVG?

(few reservations: I apologize if I missed something obvious, this is for a project that I am trying to complete at the very end of the day)

Answer 1

First, you want to create a projection and assign it to d3.geo.path so that you can configure the projection settings.

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

The default projection is d3.geo.albersUsa, which is actually a composite projection (with four different discontinuous areas) designed to display 48 states, Alaska, Hawaii, and Puerto Rico. Ah, ethnocentrism .;)

Use the albers example in the git repository to determine the correct projection parameters interactively. Settings to be set:

• the origin should be the latitude and longitude of New York (possibly 73.98 °, 40.71 °).
• the translation should be the center of your display area (therefore, if you draw something 960 × 500, you can use the default 480 250, this will be the location of the source pixel)
• scale is a number indicating how much to enlarge; since you are drawing a city scale map, you probably want the value more like 10000

Finally, you will need to select several parallels. You can use the default values ​​provided by d3.geo.albers (), but may be more suitable for NYC. Perhaps check with USGS because they often publish standard parallels for different areas of the map.