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 | }); |
---|