|
1 <!DOCTYPE html> |
|
2 <html> |
|
3 <head> |
|
4 <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> |
|
5 <title>U.S. States</title> |
|
6 <script type="text/javascript" src="../../d3.js"></script> |
|
7 <script type="text/javascript" src="../../d3.geo.js"></script> |
|
8 <style type="text/css"> |
|
9 |
|
10 svg { |
|
11 width: 960px; |
|
12 height: 500px; |
|
13 } |
|
14 |
|
15 #states path, #state-centroids circle { |
|
16 fill: #ccc; |
|
17 stroke: #fff; |
|
18 stroke-width: 1.5px; |
|
19 } |
|
20 |
|
21 #state-centroids circle { |
|
22 fill: steelblue; |
|
23 fill-opacity: .8; |
|
24 } |
|
25 |
|
26 </style> |
|
27 </head> |
|
28 <body> |
|
29 <script type="text/javascript"> |
|
30 |
|
31 // The radius scale for the centroids. |
|
32 var r = d3.scale.sqrt() |
|
33 .domain([0, 1e6]) |
|
34 .range([0, 10]); |
|
35 |
|
36 // Our projection. |
|
37 var xy = d3.geo.albersUsa(); |
|
38 |
|
39 var svg = d3.select("body").append("svg:svg"); |
|
40 svg.append("svg:g").attr("id", "states"); |
|
41 svg.append("svg:g").attr("id", "state-centroids"); |
|
42 |
|
43 d3.json("../data/us-states.json", function(collection) { |
|
44 svg.select("#states") |
|
45 .selectAll("path") |
|
46 .data(collection.features) |
|
47 .enter().append("svg:path") |
|
48 .attr("d", d3.geo.path().projection(xy)); |
|
49 }); |
|
50 |
|
51 d3.json("../data/us-state-centroids.json", function(collection) { |
|
52 svg.select("#state-centroids") |
|
53 .selectAll("circle") |
|
54 .data(collection.features |
|
55 .sort(function(a, b) { return b.properties.population - a.properties.population; })) |
|
56 .enter().append("svg:circle") |
|
57 .attr("transform", function(d) { return "translate(" + xy(d.geometry.coordinates) + ")"; }) |
|
58 .attr("r", 0) |
|
59 .transition() |
|
60 .duration(1000) |
|
61 .delay(function(d, i) { return i * 50; }) |
|
62 .attr("r", function(d) { return r(d.properties.population); }); |
|
63 }); |
|
64 |
|
65 </script> |
|
66 </body> |
|
67 </html> |