Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Add Demers cartogram example.

Like a Dorling cartogram, but with squares instead of circles.
  • Loading branch information...
commit 9f0e6271f90c4a668d763ffa8e35318173e4503a 1 parent 564418f
@jasondavies jasondavies authored
View
4 examples/cartogram/demers.css
@@ -0,0 +1,4 @@
+#chart {
+ width: 960px;
+ height: 500px;
+}
View
16 examples/cartogram/demers.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
+ <title>Demers Cartogram</title>
+ <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.layout.js"></script>
+ <link type="text/css" rel="stylesheet" href="demers.css"/>
+ </head>
+ <body>
+ <div id="chart"></div>
+ <script type="text/javascript" src="demers.js"></script>
+ </body>
+</html>
View
64 examples/cartogram/demers.js
@@ -0,0 +1,64 @@
+// Ratio of Obese (BMI >= 30) in U.S. Adults, CDC 2008
+var data = [
+ , .187, .198, , .133, .175, .151, , .1, .125, .171, , .172, .133, , .108,
+ .142, .167, .201, .175, .159, .169, .177, .141, .163, .117, .182, .153, .195,
+ .189, .134, .163, .133, .151, .145, .13, .139, .169, .164, .175, .135, .152,
+ .169, , .132, .167, .139, .184, .159, .14, .146, .157, , .139, .183, .16, .143
+];
+
+var color = d3.scale.linear()
+ .domain([d3.min(data), d3.max(data)])
+ .range(["#aad", "#556"]);
+
+var force = d3.layout.force()
+ .gravity(0)
+ .charge(0)
+ .distance(function(l) {
+ return l.length;
+ })
+ .size([960, 500]);
+
+var svg = d3.select("#chart").append("svg:svg");
+
+d3.json("../data/us-state-centroids.json", function(states) {
+ var project = d3.geo.albersUsa(),
+ idToNode = {},
+ links = [],
+ nodes = states.features.map(function(d) {
+ var xy = project(d.geometry.coordinates);
+ return idToNode[d.id] = {x: xy[0], y: xy[1], r: Math.sqrt(data[+d.id] * 5000), value: data[+d.id]};
+ });
+
+ force
+ .nodes(nodes)
+ .links(links)
+ .start()
+ .on("tick", function(e) {
+ var k = .1 * e.alpha;
+ nodes.forEach(function(a, i) {
+ nodes.forEach(function(b, i) {
+ // Check for collision
+ var dx = a.x - b.x,
+ dy = a.y - b.y,
+ dr = a.r + b.r;
+ if (dx * dx < dr * dr && dy * dy < dr * dr) {
+ a.x += dx * k;
+ a.y += dy * k;
+ }
+ });
+ });
+
+ svg.selectAll("rect")
+ .attr("x", function(d) { return d.x - d.r; })
+ .attr("y", function(d) { return d.y - d.r; });
+ });
+
+ svg.selectAll("rect")
+ .data(nodes)
+ .enter().append("svg:rect")
+ .style("fill", function(d) { return color(d.value); })
+ .attr("x", function(d) { return d.x - d.r; })
+ .attr("y", function(d) { return d.y - d.r; })
+ .attr("width", function(d) { return d.r * 2; })
+ .attr("height", function(d) { return d.r * 2; });
+});
Please sign in to comment.
Something went wrong with that request. Please try again.