Skip to content

Instantly share code, notes, and snippets.

@jefffriesen
Last active November 4, 2024 23:30
Show Gist options
  • Save jefffriesen/6892860 to your computer and use it in GitHub Desktop.
Save jefffriesen/6892860 to your computer and use it in GitHub Desktop.
US Zip Codes

This is a d3.js visualization of US zip codes.

Original zip code dataset from Geocommons.

5MB shapefile with properties such as zipcode, state, name, population, area, more.

http://geocommons.com/overlays/54893 (Thank you Bill Greer)

This converts it nicely:

topojson \
  -p name=PO_NAME \
  -p zip=ZIP \
  -p state=STATE \
  -o zips_us_topo.json \
  zip_codes_for_the_usa.shp
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.zip {
fill: none;
stroke: #CCC;
stroke-width: .5px;
}
</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://d3js.org/queue.v1.min.js"></script>
<script src="http://d3js.org/topojson.v1.min.js"></script>
<script>
var width = 960,
height = 500;
var path = d3.geo.path();
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
queue()
.defer(d3.json, "zips_us_topo.json")
.await(ready);
function ready(error, us) {
svg.append("g")
.attr("class", "counties")
.selectAll("path")
.data(topojson.feature(us, us.objects.zip_codes_for_the_usa).features)
.enter().append("path")
.attr("class", "zip")
.attr("data-zip", function(d) {return d.properties.zip; })
.attr("data-state", function(d) {return d.properties.state; })
.attr("data-name", function(d) {return d.properties.name; })
.attr("d", path);
}
</script>
</body>
Display the source blob
Display the rendered blob
Raw
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
@skonkimalla
Copy link

Hi everyone, any one has updated topo JSON with MSA data? please share here if you find any..thanks

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment