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: #000; | |
| stroke-width: .1px; | |
| } | |
| </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> |