I'm trying to draw a map of NYC using d3. I've downloaded a bunch of shapefiles from http://www.nyc.gov/html/dcp/html/bytes/dwndistricts.shtml. I've converted them to geoJSON using http://converter.mygeodata.eu/, such that they're in WGS 84 (aka, I think, latitude and longitude).
I'm pretty sure the geoJSON is valid: I can plot it using matplotlib and it looks like NYC, and the numbers seem to be in a valid range. Here's 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")
This plots, as advertised, the Albers projection of NYC. Trouble is, I think, that the scale of the projection is chosen so that the US fits onto a nice webpage, making the paths for NYC a little squiggle at the right-hand-side of the screen.
What's the 'correct' way (lemme try to claim to be the first to say d3onic) to scale a geo.path()
such that the extents of my lat/lon scale onto the width and height of my SVG?
(little disclaimer: apologies if I've missed something obvious, this is for a project I'm trying to complete at the extreme ends of the day)