cjhin/index.html

## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.zipcode {
  stroke: steelblue;
  fill: #FFF;
}
</style>

<script src="//d3js.org/d3.v3.min.js"></script>
<script>
  /*
  data comes from: https://github.com/smartchicago/chicago-atlas/blob/master/db/import/zipcodes.geojson
  lots of help from http://stackoverflow.com/questions/14492284/center-a-map-in-d3-given-a-geojson-object
  */

  //Load in GeoJSON data
  d3.json("zipcodes.json", function(json) {

    //Width and height
    var width = 900;
    var height = 450;

    // create a first guess for the projection
    var center = d3.geo.centroid(json)
    var scale = 150;
    var projection = d3.geo.mercator().scale(scale).center(center);
    //Define path generator
    var path = d3.geo.path()
                    .projection(projection);

    // using the path determine the bounds of the current map and use
    // these to determine better values for the scale and translation
    var bounds = path.bounds(json);
    var hscale = scale * width / (bounds[1][0] - bounds[0][0]);
    var vscale = scale * height / (bounds[1][1] - bounds[0][1]);
    var scale = (hscale < vscale) ? hscale : vscale;
    var offset = [width - (bounds[0][0] + bounds[1][0]) / 2,
                     height - (bounds[0][1] + bounds[1][1]) / 2];

    // new projection
    projection = d3.geo.mercator().center(center)
     .scale(scale * 0.9).translate(offset);
    path = path.projection(projection);

    //Create SVG element
    var svg = d3.select(".chart")
               .attr("width", width)
               .attr("height", height)

    //Bind data and create one path per GeoJSON feature
    svg.selectAll("path")
      .data(json.features)
      .enter()
      .append("path")
      .attr("d", path)
      .attr("class", "zipcode");

  });
</script>

<body>
  <svg class="chart"></svg>
</body>

## thumbnail.png

      
    Raw
  

              thumbnail.png
            
          
## zipcodes.json

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              zipcodes.json
            
          
      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>
	<meta charset="utf-8">
	<style>
	.zipcode {
	stroke: steelblue;
	fill: #FFF;
	}
	</style>

	<script src="//d3js.org/d3.v3.min.js"></script>
	<script>
	/*
	data comes from: https://github.com/smartchicago/chicago-atlas/blob/master/db/import/zipcodes.geojson
	lots of help from http://stackoverflow.com/questions/14492284/center-a-map-in-d3-given-a-geojson-object
	*/

	//Load in GeoJSON data
	d3.json("zipcodes.json", function(json) {

	//Width and height
	var width = 900;
	var height = 450;

	// create a first guess for the projection
	var center = d3.geo.centroid(json)
	var scale = 150;
	var projection = d3.geo.mercator().scale(scale).center(center);
	//Define path generator
	var path = d3.geo.path()
	.projection(projection);

	// using the path determine the bounds of the current map and use
	// these to determine better values for the scale and translation
	var bounds = path.bounds(json);
	var hscale = scale * width / (bounds[1][0] - bounds[0][0]);
	var vscale = scale * height / (bounds[1][1] - bounds[0][1]);
	var scale = (hscale < vscale) ? hscale : vscale;
	var offset = [width - (bounds[0][0] + bounds[1][0]) / 2,
	height - (bounds[0][1] + bounds[1][1]) / 2];

	// new projection
	projection = d3.geo.mercator().center(center)
	.scale(scale * 0.9).translate(offset);
	path = path.projection(projection);

	//Create SVG element
	var svg = d3.select(".chart")
	.attr("width", width)
	.attr("height", height)

	//Bind data and create one path per GeoJSON feature
	svg.selectAll("path")
	.data(json.features)
	.enter()
	.append("path")
	.attr("d", path)
	.attr("class", "zipcode");

	});
	</script>

	<body>
	<svg class="chart"></svg>
	</body>