--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/toolkit/javascript/d3/examples/choropleth/choropleth-area.html Thu Apr 10 14:20:23 2014 +0200
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
+ <script type="text/javascript" src="../../d3.js"></script>
+ <script type="text/javascript" src="../../d3.geo.js"></script>
+ <script type="text/javascript" src="../../d3.geom.js"></script>
+ <script type="text/javascript" src="../../d3.behavior.js"></script>
+ <style type="text/css">
+
+svg {
+ background: #eee;
+ width: 960px;
+ height: 500px;
+}
+
+ </style>
+ </head>
+ <body>
+ <script type="text/javascript">
+
+var svg = d3.select("body")
+ .append("svg:svg")
+ .call(d3.behavior.zoom()
+ .on("zoom", redraw))
+ .append("svg:g");
+
+var counties = svg.append("svg:g")
+ .attr("id", "counties");
+
+var path = d3.geo.path();
+
+var fill = d3.scale.log()
+ .domain([10, 500])
+ .range(["brown", "steelblue"]);
+
+d3.json("../data/us-counties.json", function(json) {
+ counties.selectAll("path")
+ .data(json.features)
+ .enter().append("svg:path")
+ .attr("d", path)
+ .attr("fill", function(d) { return fill(path.area(d)); });
+});
+
+function redraw() {
+ svg.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
+}
+
+ </script>
+ </body>
+</html>