mango314/a.md

## readme.md

      
    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

More on Mercator.
More on cartography

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.

  
## a.md

      
    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


## b.md

      
    Raw
  

              b.md
            
          
    an actual zip code map


## 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>
	<!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.7559sc(d[0]+74.1); return q;})
	.y(function(d){q= sc(-1d[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>