Skip to content

Instantly share code, notes, and snippets.

Last active July 24, 2016 18:35
What would you like to do?
<!DOCTYPE html>
<meta charset="utf-8">
.zipcode {
stroke: steelblue;
fill: #FFF;
<script src="//"></script>
data comes from:
lots of help from
//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()
// 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 =".chart")
.attr("width", width)
.attr("height", height)
//Bind data and create one path per GeoJSON feature
.attr("d", path)
.attr("class", "zipcode");
<svg class="chart"></svg>
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment