Created
May 3, 2012 12:08
-
-
Save ilyabo/2585241 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", 3) | |
| 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
Came across this map, during my research, this appear to be Demers not Dorling cartogram.