Skip to content

Instantly share code, notes, and snippets.

@mango314

mango314/a.md

Last active December 11, 2015 18:08
Show Gist options
  • Save mango314/4639415 to your computer and use it in GitHub Desktop.
Save mango314/4639415 to your computer and use it in GitHub Desktop.
Download ZIP
zip code map of the Bronx
Raw
readme.md

Map of the Bronx using GIS data and d3.js

Getting coordinates from NYC OpenData I successfully plotted the zip codes

There is still some distortion. However, we know from diffential geometry this could be fixed by some transform, since the Bronx is not that big. I think has to do with the aspect ratio between the latitude and longitude lines around New York City. (x:y=0.7559:1)

In the process I learned about geoJSON polygons, Albers and Mercator projections.

AlbersUSA is the standard one on d3.js

In geometry class we learned the Earth (i.e. near the Bronx) is basically flat. The curvature of the Earth is negligible for our relatively small map.

Raw
a.md

my result: Playing with d3.js I learned that Hart Island off the coast of City Island. They have separate ZIP codes

Raw
b.md

an actual zip code map

Raw
bxzip.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://d3js.org/queue.v1.min.js"></script>
<style>
.stroke {
fill: none;
stroke: #000;
stroke-width: .5px;
}
</style>
</head>
<body>
<script>
var width=960, height=500;
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
var q = 0;
var sc = 3000;
var d3line2 = d3.svg.line()
.x(function(d){q= 0.7559*sc*(d[0]+74.1); return q;})
.y(function(d){q= sc*(-1*d[1]+40.92); return q;})
.interpolate("linear");
d3.json("/static/bxzip.json", function(d){
for(var k = 0; k < d.data.length; k++){
svg.append("path")
.attr("d", d3line2(d.data[k][9][5].rings[0]) )
.attr("class", "stroke");
}
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment