zhm · January 22, 2014 03:58 · Jan 22, 2014
diff --git a/index.html b/index.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Non-Contiguous Cartogram</title>
+<style>
+
+.land {
+  fill: #fff;
+  stroke: #ccc;
+}
+
+.state {
+  fill: #ccc;
+  stroke: #666;
+}
+
+</style>
+<body>
+<script src="http://d3js.org/d3.v3.min.js"></script>
+<script src="http://d3js.org/topojson.v1.min.js"></script>
+<script>
+
+var valueById = [7, 6, 14, 7, 8, 10, 8, 11, 8, 20, 30, 7, 7, 4, 6, 5, 8, 7, 4, 6, 8, 9, 5, 16, 8, 13, 8, 9, 11, 8, 7, 8, 6, 13, 10, 10, 8, 14, 12, 24, 4, 8, 6, 5, 12, 11, 12, 14, 12, 9, 5, 4, 7, 14, 8, 10, 13, 9, 7];
+console.log(valueById);
+var path = d3.geo.path();
+
+var svg = d3.select("body").append("svg")
+    .attr("width", 960)
+    .attr("height", 500);
+
+d3.json("/d/4090846/us.json", function(error, us) {
+  console.log(us);
+
+  svg.append("path")
+      .datum(topojson.feature(us, us.objects.land))
+      .attr("class", "land")
+      .attr("d", path);
+
+  svg.selectAll(".state")
+      .data(topojson.feature(us, us.objects.states).features)
+    .enter().append("path")
+      .attr("class", "state")
+      .attr("d", path)
+      .attr("transform", function(d) {
+        var centroid = path.centroid(d),
+            x = centroid[0],
+            y = centroid[1];
+        return "translate(" + x + "," + y + ")"
+            + "scale(" + (valueById[d.id] || 0) + ")"
+            + "translate(" + -x + "," + -y + ")";
+      })
+      .style("stroke-width", function(d) {
+        return 1 / Math.sqrt(valueById[d.id] * 5 || 1);
+      });
+});