Error mapping US Zip codes with topojson

Question

After loading a US zipcode topojson file I am getting an error in d3.js. groupdata is undefined on this line:

  function bind(group, groupData) {
     var i, n = group.length, m = groupData.length, n0 = Math.min(n, m), updateNodes = new Array(m), enterNodes = new Array(m), exitNodes = new Array(n), node, nodeData;

with an error of:

Uncaught TypeError: Cannot read property 'length' of undefined 

My code that is calling and creating the paths is:

  d3.json("data/us-atlas/us-zipcodes.json", function(error, topology) {
  svg.selectAll("path")
      .data(topojson.feature(topology, topology.objects.zipcodes).features)
      .enter()
      .append("path")
      .attr("d", path)
  });

I generated the zipcode topojson file from this repo: https://github.com/mbostock/us-atlas. When I inspect the topology object on load I see 32893 arcs under topology.objects.zipcodes.

I have successfully loaded counties under with the chloropleth example http://bl.ocks.org/mbostock/4060606 and am using a similar pattern as that.

I'm using d3.js version 3.2.8 and topojson.js version 1.2.3.

Any ideas? Is it a bad zipcode file or am I calling it wrong?

Answer 1

@Hugolpz - sorry, I didn't I didn't respond. I didn't get notified of your comment.

I finally figured it out. I'm recording it here so maybe it will help someone.

I originally got my zip code shapefiles from the US Census website (currently down because of government shutdown). It was called tl_2012_us_zcta510.zip and was 836MB. I tried to convert it using topojson using the parameters @mbostock suggested here: http://bl.ocks.org/mbostock/4965422

Conversion took over 12 hours giving node.js 6GB of memory to convert the shapefile into a topojson file. It still wouldn't work in d3.js (see errors in original question). Also, debugging that large of a json file it was difficult to debug. The original shapefile also wouldn't display in QGIS.

I eventually gave up and searched for different data sets. Geocommons has a 5MB zipcode shapefile with properties such as zipcode, state, name, population and area: http://geocommons.com/overlays/54893. I handed it over to topojson and it converted the shapefile in under a minute:

topojson \
-p name=PO_NAME \
-p zip=ZIP \
-p state=STATE \
-o zips_us_topo.json \
zip_codes_for_the_usa.shp

In order to inspect the json file to understand it, I used https://github.com/einars/js-beautify with this command:

js-beautify zips_us_topo.json -o zips_us_topo_pretty.json

I used the non-prettified version to load in the browser though because it's smaller.

To map it, I essentially used the same code as @mbostock's county chloropleth map. If you need that or the d3 code or cleaned up topojson file you can get them here:

https://gist.github.com/jefffriesen/6892860

http://bl.ocks.org/jefffriesen/6892860