equal
deleted
inserted
replaced
|
1 <!DOCTYPE html> |
|
2 <html> |
|
3 <head> |
|
4 <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> |
|
5 <script type="text/javascript" src="../../d3.js"></script> |
|
6 <script type="text/javascript" src="../../d3.geo.js"></script> |
|
7 <script type="text/javascript" src="../../d3.geom.js"></script> |
|
8 <script type="text/javascript" src="../../d3.behavior.js"></script> |
|
9 <style type="text/css"> |
|
10 |
|
11 svg { |
|
12 background: #eee; |
|
13 width: 960px; |
|
14 height: 500px; |
|
15 } |
|
16 |
|
17 </style> |
|
18 </head> |
|
19 <body> |
|
20 <script type="text/javascript"> |
|
21 |
|
22 var svg = d3.select("body") |
|
23 .append("svg:svg") |
|
24 .call(d3.behavior.zoom() |
|
25 .on("zoom", redraw)) |
|
26 .append("svg:g"); |
|
27 |
|
28 var counties = svg.append("svg:g") |
|
29 .attr("id", "counties"); |
|
30 |
|
31 var path = d3.geo.path(); |
|
32 |
|
33 var fill = d3.scale.log() |
|
34 .domain([10, 500]) |
|
35 .range(["brown", "steelblue"]); |
|
36 |
|
37 d3.json("../data/us-counties.json", function(json) { |
|
38 counties.selectAll("path") |
|
39 .data(json.features) |
|
40 .enter().append("svg:path") |
|
41 .attr("d", path) |
|
42 .attr("fill", function(d) { return fill(path.area(d)); }); |
|
43 }); |
|
44 |
|
45 function redraw() { |
|
46 svg.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")"); |
|
47 } |
|
48 |
|
49 </script> |
|
50 </body> |
|
51 </html> |