clhenrick/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>D3 NYC Geo Test</title>
    </head>
    <style type="text/css">
        body {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
        }
    </style>
    <body>
        <script src="http://d3js.org/d3.v3.min.js"></script>
        <script type="text/javascript">
            /* code reused from the following stackoverflow question:
            http://stackoverflow.com/questions/14492284/center-a-map-in-d3-given-a-geojson-object */

            var width = 900,
                height = 900;

            var svg = d3.select("body").append("svg")
                .attr("width", width)
                .attr("height", height)
                .attr("class", "svg");

            // load geojson and do stuff in a callback function...
            d3.json("nyc_coastline.json", function(error, data){
                // console.log the data
                console.log(data);

                // create a unit projection
                var projection = d3.geo.albers()
                    .scale(1)
                    .translate([0,0]);

                // create a path generator.
                var path = d3.geo.path()
                    .projection(projection);

                // compute bounds of a point of interest, then derive scale and translate
                var b = path.bounds(data),
                    s = .95 / Math.max((b[1][0] - b[0][0]) / width, (b[1][1] - b[0][1]) / height),
                    t = [(width - s * (b[1][0] + b[0][0])) / 2, (height - s * (b[1][1] + b[0][1])) / 2];

                // update the projection to use computed scale and translate....
                projection
                    .scale(s)
                    .translate(t);

                // calculate and draw a bounding box for the geojson
                svg.append("rect")
                    .attr('width', width)
                    .attr('height', height)
                    .style('stroke', 'black')
                    .style('fill', 'orange');

                // draw the svg of both the geojson and bounding box
                svg.selectAll("path").data(data.features).enter().append("path")
                    .attr("d", path)
                    .style("fill", "red")
                    .style("stroke-width", "1")
                    .style("stroke", "blue")

            });

        </script>
    </body>
</html>

## nyc_coastline.json

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              nyc_coastline.json
            
          
      Loading

      Sorry, something went wrong. Reload?
      Sorry, we cannot display this file.
      Sorry, this file is invalid so it cannot be displayed.
      
          Viewer requires iframe.
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>D3 NYC Geo Test</title>
	</head>
	<style type="text/css">
	body {
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	}
	</style>
	<body>
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script type="text/javascript">
	/* code reused from the following stackoverflow question:
	http://stackoverflow.com/questions/14492284/center-a-map-in-d3-given-a-geojson-object */

	var width = 900,
	height = 900;

	var svg = d3.select("body").append("svg")
	.attr("width", width)
	.attr("height", height)
	.attr("class", "svg");

	// load geojson and do stuff in a callback function...
	d3.json("nyc_coastline.json", function(error, data){
	// console.log the data
	console.log(data);

	// create a unit projection
	var projection = d3.geo.albers()
	.scale(1)
	.translate([0,0]);

	// create a path generator.
	var path = d3.geo.path()
	.projection(projection);

	// compute bounds of a point of interest, then derive scale and translate
	var b = path.bounds(data),
	s = .95 / Math.max((b[1][0] - b[0][0]) / width, (b[1][1] - b[0][1]) / height),
	t = [(width - s * (b[1][0] + b[0][0])) / 2, (height - s * (b[1][1] + b[0][1])) / 2];

	// update the projection to use computed scale and translate....
	projection
	.scale(s)
	.translate(t);

	// calculate and draw a bounding box for the geojson
	svg.append("rect")
	.attr('width', width)
	.attr('height', height)
	.style('stroke', 'black')
	.style('fill', 'orange');

	// draw the svg of both the geojson and bounding box
	svg.selectAll("path").data(data.features).enter().append("path")
	.attr("d", path)
	.style("fill", "red")
	.style("stroke-width", "1")
	.style("stroke", "blue")

	});

	</script>
	</body>
	</html>