--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/toolkit/javascript/d3/examples/symbol-map/symbol-map.html Thu Apr 10 14:20:23 2014 +0200
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
+ <title>U.S. States</title>
+ <script type="text/javascript" src="../../d3.js"></script>
+ <script type="text/javascript" src="../../d3.geo.js"></script>
+ <style type="text/css">
+
+svg {
+ width: 960px;
+ height: 500px;
+}
+
+#states path, #state-centroids circle {
+ fill: #ccc;
+ stroke: #fff;
+ stroke-width: 1.5px;
+}
+
+#state-centroids circle {
+ fill: steelblue;
+ fill-opacity: .8;
+}
+
+ </style>
+ </head>
+ <body>
+ <script type="text/javascript">
+
+// The radius scale for the centroids.
+var r = d3.scale.sqrt()
+ .domain([0, 1e6])
+ .range([0, 10]);
+
+// Our projection.
+var xy = d3.geo.albersUsa();
+
+var svg = d3.select("body").append("svg:svg");
+svg.append("svg:g").attr("id", "states");
+svg.append("svg:g").attr("id", "state-centroids");
+
+d3.json("../data/us-states.json", function(collection) {
+ svg.select("#states")
+ .selectAll("path")
+ .data(collection.features)
+ .enter().append("svg:path")
+ .attr("d", d3.geo.path().projection(xy));
+});
+
+d3.json("../data/us-state-centroids.json", function(collection) {
+ svg.select("#state-centroids")
+ .selectAll("circle")
+ .data(collection.features
+ .sort(function(a, b) { return b.properties.population - a.properties.population; }))
+ .enter().append("svg:circle")
+ .attr("transform", function(d) { return "translate(" + xy(d.geometry.coordinates) + ")"; })
+ .attr("r", 0)
+ .transition()
+ .duration(1000)
+ .delay(function(d, i) { return i * 50; })
+ .attr("r", function(d) { return r(d.properties.population); });
+});
+
+ </script>
+ </body>
+</html>