xxxxxxxxxx<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 https://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> https://d3js.org/d3.v3.min.js