[76] | 1 | // Ratio of Obese (BMI >= 30) in U.S. Adults, CDC 2008 |
---|
| 2 | var data = [ |
---|
| 3 | , .187, .198, , .133, .175, .151, , .1, .125, .171, , .172, .133, , .108, |
---|
| 4 | .142, .167, .201, .175, .159, .169, .177, .141, .163, .117, .182, .153, .195, |
---|
| 5 | .189, .134, .163, .133, .151, .145, .13, .139, .169, .164, .175, .135, .152, |
---|
| 6 | .169, , .132, .167, .139, .184, .159, .14, .146, .157, , .139, .183, .16, .143 |
---|
| 7 | ]; |
---|
| 8 | |
---|
| 9 | var svg = d3.select("#chart") |
---|
| 10 | .append("svg:svg"); |
---|
| 11 | |
---|
| 12 | d3.json("../data/us-states.json", function(json) { |
---|
| 13 | var path = d3.geo.path(); |
---|
| 14 | |
---|
| 15 | // A thick black stroke for the exterior. |
---|
| 16 | svg.append("svg:g") |
---|
| 17 | .attr("class", "black") |
---|
| 18 | .selectAll("path") |
---|
| 19 | .data(json.features) |
---|
| 20 | .enter().append("svg:path") |
---|
| 21 | .attr("d", path); |
---|
| 22 | |
---|
| 23 | // A white overlay to hide interior black strokes. |
---|
| 24 | svg.append("svg:g") |
---|
| 25 | .attr("class", "white") |
---|
| 26 | .selectAll("path") |
---|
| 27 | .data(json.features) |
---|
| 28 | .enter().append("svg:path") |
---|
| 29 | .attr("d", path); |
---|
| 30 | |
---|
| 31 | // The polygons, scaled! |
---|
| 32 | svg.append("svg:g") |
---|
| 33 | .attr("class", "grey") |
---|
| 34 | .selectAll("path") |
---|
| 35 | .data(json.features) |
---|
| 36 | .enter().append("svg:path") |
---|
| 37 | .attr("transform", function(d) { |
---|
| 38 | var centroid = path.centroid(d), |
---|
| 39 | x = centroid[0], |
---|
| 40 | y = centroid[1]; |
---|
| 41 | return "translate(" + x + "," + y + ")" |
---|
| 42 | + "scale(" + Math.sqrt(data[+d.id] * 5 || 0) + ")" |
---|
| 43 | + "translate(" + -x + "," + -y + ")"; |
---|
| 44 | }) |
---|
| 45 | .style("stroke-width", function(d) { |
---|
| 46 | return 1 / Math.sqrt(data[+d.id] * 5); |
---|
| 47 | }) |
---|
| 48 | .attr("d", path); |
---|
| 49 | |
---|
| 50 | }); |
---|