javascript - Interactive d3 zip code choropleth - WA state -

as title says, i'm trying make interactive choropleth using d3. i've found interesting example i'm trying replicate location. concretely, i'm trying plot washington state, @ zip code level.

i've added code have @ moment potentially edited, it's based on example here live demo shows final result.

this working california state, when changing zip code topojson state (to washington state) plot doesn't work. there no explicit errors. error in differences in topojson.

this california topojson, here washington version.

below first values pretty printed each topojson.

california topojson:     {       "type": "topology",       "objects": {         "zip": {           "type": "geometrycollection",           "crs": {             "type": "name",             "properties": {               "name": "urn:ogc:def:crs:ogc:1.3:crs84"             }           },           "geometries": [             {               "type": "polygon",               "properties": {                 "zipcode": 94601               },               "arcs": [                 [                   0,                   1,                   2,                   3,                   4,                   5                 ]               ]             } 

washington topojson:

{   "type": "topology",   "objects": {     "tl_2010_53_zcta510": {       "type": "geometrycollection",       "crs": {         "type": "name",         "properties": {           "name": "urn:ogc:def:crs:ogc:1.3:crs84"         }       },       "geometries": [         {           "type": "polygon",           "properties": {             "zipcode": "98822"           },           "arcs": [             [               0,               1,               2,               3             ],             [               4             ]           ]         } 

the following main.js function. assume , inspecting both topojson files find problem might be. thing changing topojson file, main.js function should reflect these changes.

also "fake_data.csv" represent serie of zipcode:value pairs as:

zip,values 98001,1 98002,1 98003,1 98004,2 98005,2 98006,2 

main.js

    (function chart() {    var width = 1000,       height = 1200,       centered;    var ratebyid = d3.map();    var quantize = d3.scale.quantize()       .domain([0, 100000])       .range(d3.range(9).map(function(i) { return "q" + + "-9"; }));    var projection = d3.geo.albersusa()       .scale(6000)       .translate([2300, 680]);    var path = d3.geo.path()       .projection(projection);    var svg = d3.select("#ca-chart").append("svg")       .attr("width", width)       .attr("height", height);    var tooltip = d3.select("#ca-chart").append("div")       .attr("class", "tooltip")       .style("opacity", 0);    svg.append("rect")       .attr("class", "background")       .attr("width", width)       .attr("height", height)       .on("click", clicked);    var g = svg.append("g");  // these 2 lines different working example   queue()       .defer(d3.json, "https://gist.githubusercontent.com/martinbel/e14cd6ecd565914f53af/raw/e3a3a8332c20fe3cee6d7fd2a9ac01ad43f7aaa4/wa.topojson")       .defer(d3.csv, "fake_data.csv", function(d) { ratebyid.set(d.zip.tostring(), +d.values); })       .await(ready);    function ready(error, zipcode) {     var features = topojson.feature(zipcode, zipcode.objects.tl_2010_53_zcta510).features;      g.append("g")         .attr("class", "state")       .selectall("path")         .data(topojson.feature(zipcode, zipcode.objects.tl_2010_53_zcta510).features)       .enter().append("path")         .attr("d", path)         .attr("stroke", "#333")         .attr("stroke-width", "1.5px")         .attr("fill", "#fff");      g.append("g")         .attr("class", "zipcodes")       .selectall("path")         .data(features)       .enter().append("path")         .attr("class", getcolorclass)         .attr("d", path)         .on("click", clicked)         .on("mouseover", mouseover)         .on("mouseout", mouseout);   }    function getcolorclass(d) {     return quantize(ratebyid.get(d.properties.zipcode));   }    function getpopulation(d) {     return ratebyid.get(getzip(d)).tostring();   }    function getzip(d) {     return d && d.properties ? d.properties.zipcode : null;   }    function mouseout(d) {     d3.select(this)         .style("stroke", null);      tooltip.transition()         .duration(250)         .style("opacity", 0);   }    function mouseover(d) {     d3.select(this.parentnode.appendchild(this))         .style("stroke", "#f00");      tooltip.transition()         .duration(250)         .style("opacity", 1);      tooltip         .html("<p><strong>zipcode: " + getzip(d) + "<br>population: "  + getpopulation(d) + "</strong></p>")         .style("left", (d3.event.pagex + 25) + "px")         .style("top",  (d3.event.pagey - 28) + "px");     }    function clicked(d) {     var x, y, k;      if (d && centered !== d) {       var centroid = path.centroid(d);       x = centroid[0];       y = centroid[1];       k = 8;    // control zoom depth       centered = d;     } else {       x = width / 2;       y = height / 2;       k = 1;       centered = null;     }      g.selectall("path")         .classed("active", centered && function(d) { return d === centered; });      g.transition()         .duration(750)         .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")scale(" + k + ")translate(" + -x + "," + -y + ")")         .style("stroke-width", 1.5 / k + "px");   }    d3.select(self.frameelement).style("height", height + "px");  }()); 

the topojson file produced in following way:

curl -o "ftp://ftp2.census.gov/geo/tiger/tiger2010/zcta5/2010/tl_2010_53_zcta510.zip" unzip "tl_2010_53_zcta510.zip" ogr2ogr -f geojson -s_srs crs:84 -t_srs crs:84 tl_2010_53_zcta510.geojson tl_2010_53_zcta510.shp topojson -o tl_2010_53_zcta510.topojson --properties zipcode=zcta5ce10 tl_2010_53_zcta510.geojson 

the issue you're drawing paths outside of active viewing area. try projection , you'll see paths.

var projection = d3.geo.albersusa()   // .scale(6000)   // .translate([2300, 680]); 

you'll have edit scaling/translation washington...might helpful make svg width , height ginormous (10000px or so) can see map ends up.