-
-
Save webmutation/cf95de0889652fc0b4d7c72dcef16aa6 to your computer and use it in GitHub Desktop.
D3 Dorling cartogram with rectangular states
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> | |
| <title>Dorling Cartogram</title> | |
| <script type="text/javascript" src="http://mbostock.github.com/d3/d3.v2.js"></script> | |
| <style> | |
| #chart { | |
| width: 960px; | |
| height: 470px; | |
| } | |
| circle { | |
| stroke: #000; | |
| stroke-width: .5px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="chart"></div> | |
| <button id="restart" onclick="force.start()">Reheat</button> | |
| <button id="update" onclick="update()">Renew</button> | |
| <script> | |
| var force = d3.layout.force() | |
| .charge(0) | |
| .gravity(0) | |
| .size([960, 470]); | |
| var update; | |
| d3.json("us-state-centroids.json", function(states) { | |
| var project = d3.geo.albersUsa(), | |
| idToNode = {}, | |
| links = []; | |
| update = function() { | |
| d3.select("svg").remove(); | |
| var svg = d3.select("#chart").append("svg") | |
| .attr("width", 960) | |
| .attr("height", 470) | |
| .append("g") | |
| .attr("transform", "translate(50,20)"); | |
| var nodes = states.features.map(function(d) { | |
| var xy = project(d.geometry.coordinates); | |
| return idToNode[d.id] = { | |
| x: xy[0], | |
| y: xy[1], | |
| gravity: {x: xy[0], y: xy[1]}, | |
| width: Math.random()*100+25, | |
| height: Math.random()*100+25 | |
| }; | |
| }); | |
| var overlapColor = d3.scale.linear() | |
| .domain([0, 7]) | |
| .range(["#2070a0", "orange"]) | |
| //nodes = nodes.slice(0, 50) | |
| force | |
| .nodes(nodes) | |
| .links(links) | |
| .start() | |
| .on("tick", function(e) { | |
| var k = e.alpha, | |
| kg = k * .02, | |
| spaceAround = 0.; | |
| nodes.forEach(function(a, i) { | |
| // Apply gravity forces. | |
| a.x += (a.gravity.x - a.x) * kg; | |
| a.y += (a.gravity.y - a.y) * kg; | |
| a.overlapCount = 0; | |
| nodes.slice(i + 1).forEach(function(b) { | |
| /* | |
| // Check for collisions. | |
| var dx = a.x - b.x, | |
| dy = a.y - b.y, | |
| l = Math.sqrt(dx * dx + dy * dy), | |
| d = a.r + b.r; | |
| if (l < d) { | |
| l = (l - d) / l * k; | |
| dx *= l; | |
| dy *= l; | |
| a.x -= dx; | |
| a.y -= dy; | |
| b.x += dx; | |
| b.y += dy; | |
| } | |
| */ | |
| dx = (a.x - b.x) | |
| dy = (a.y - b.y) | |
| adx = Math.abs(dx) | |
| ady = Math.abs(dy) | |
| mdx = (1+spaceAround)* (a.width + b.width)/2 | |
| mdy = (1+spaceAround)* (a.height + b.height)/2 | |
| if (adx < mdx && ady < mdy) { | |
| l = Math.sqrt(dx * dx + dy * dy) | |
| lx = (adx - mdx) / l * k | |
| ly = (ady - mdy) / l * k | |
| // choose the direction with less overlap | |
| if (lx > ly && ly > 0) lx = 0; | |
| else if (ly > lx && lx > 0) ly = 0; | |
| dx *= lx | |
| dy *= ly | |
| a.x -= dx | |
| a.y -= dy | |
| b.x += dx | |
| b.y += dy | |
| a.overlapCount++; | |
| } | |
| }); | |
| }); | |
| svg.selectAll("rect") | |
| .style("fill", function(d) { return overlapColor(d.overlapCount); }) | |
| .attr("x", function(d) { return d.x- d.width/2; }) | |
| .attr("y", function(d) { return d.y- d.height/2; }); | |
| svg.selectAll("line") | |
| .attr("x2", function(d) { return d.x; }) | |
| .attr("y2", function(d) { return d.y; }) | |
| svg.selectAll("circle.end") | |
| .attr("cx", function(d) { return d.x; }) | |
| .attr("cy", function(d) { return d.y; }) | |
| }); | |
| var g = svg.selectAll("g") | |
| .data(nodes) | |
| .enter() | |
| .append("g") | |
| .attr("transform", "translate(100,100),scale(0.5)") | |
| g.append("circle") | |
| .attr("stroke", "#000") | |
| .attr("fill", "#fff") | |
| .attr("cx", function(d) { return d.gravity.x; }) | |
| .attr("cy", function(d) { return d.gravity.y; }) | |
| .attr("r", 3) | |
| g.append("line") | |
| .attr("stroke", "#000") | |
| .attr("opacity", "0.3") | |
| .attr("x1", function(d) { return d.gravity.x; }) | |
| .attr("y1", function(d) { return d.gravity.y; }) | |
| g.append("rect") | |
| .attr("opacity", 0.75) | |
| .attr("x", function(d) { return d.x - d.width/2; }) | |
| .attr("y", function(d) { return d.y - d.height/2; }) | |
| .attr("width", function(d, i) { return d.width; }) | |
| .attr("height", function(d, i) { return d.height; }) | |
| g.append("circle") | |
| .attr("class", "end") | |
| .attr("stroke", "#000") | |
| .attr("fill", "#fff") | |
| .attr("r", 10) | |
| g.append("circle") | |
| }; | |
| update(); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment