Skip to content

Instantly share code, notes, and snippets.

@reynish

reynish/README.md

Forked from mbostock/.block
Last active August 29, 2015 14:06
Download ZIP

Revisions

  1. @mbostock mbostock revised this gist Feb 18, 2013. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -46,7 +46,7 @@
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

    d3.json("../3750900/us-state-centroids.json", function(error, states) {
    d3.json("/mbostock/raw/3750900/us-state-centroids.json", function(error, states) {
    var nodes = states.features
    .filter(function(d) { return !isNaN(valueById[+d.id]); })
    .map(function(d) {
  2. @mbostock mbostock revised this gist Nov 13, 2012. 1 changed file with 0 additions and 0 deletions.
    Binary file added thumbnail.png
    View file
    Loading
    Sorry, something went wrong. Reload?
    Sorry, we cannot display this file.
    Sorry, this file is invalid so it cannot be displayed.
  3. @mbostock mbostock revised this gist Nov 12, 2012. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1 +1 @@
    This is not a true Dorling cartogram; it lacks links between adjacent features. Instead of trying to preserve connectedness, this psuedo-cartogram tries to preserve locality, putting each circle as close as possible to its origin without overlapping.
    This is not a true Dorling cartogram; it lacks links between adjacent features. Instead of trying to preserve connectedness, this pseudo-cartogram tries to preserve locality, putting each circle as close as possible to its origin without overlapping.
  4. @mbostock mbostock revised this gist Nov 11, 2012. 1 changed file with 0 additions and 1 deletion.
    1 change: 0 additions & 1 deletion index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -14,7 +14,6 @@
    <script src="http://d3js.org/d3.v3.min.js"></script>
    <script>


    // Ratio of Obese (BMI >= 30) in U.S. Adults, CDC 2008
    var valueById = [
    NaN, .187, .198, NaN, .133, .175, .151, NaN, .100, .125,
  5. @mbostock mbostock revised this gist Nov 11, 2012. 2 changed files with 20 additions and 23 deletions.
    2 changes: 1 addition & 1 deletion README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1 +1 @@
    This is not a true Demers cartogram; it lacks links between adjacent features. Instead of trying to preserve connectedness, this psuedo-cartogram tries to preserve locality, putting each square as close as possible to its origin without overlapping.
    This is not a true Dorling cartogram; it lacks links between adjacent features. Instead of trying to preserve connectedness, this psuedo-cartogram tries to preserve locality, putting each circle as close as possible to its origin without overlapping.
    41 changes: 19 additions & 22 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,9 +1,9 @@
    <!DOCTYPE html>
    <meta charset="utf-8">
    <title>Demers Cartogram</title>
    <title>Dorling Cartogram</title>
    <style>

    rect {
    circle {
    fill: #eee;
    stroke: #000;
    stroke-width: 1.5px;
    @@ -14,6 +14,7 @@
    <script src="http://d3js.org/d3.v3.min.js"></script>
    <script>


    // Ratio of Obese (BMI >= 30) in U.S. Adults, CDC 2008
    var valueById = [
    NaN, .187, .198, NaN, .133, .175, .151, NaN, .100, .125,
    @@ -41,8 +42,10 @@
    .size([width, height]);

    var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

    d3.json("../3750900/us-state-centroids.json", function(error, states) {
    var nodes = states.features
    @@ -64,17 +67,16 @@
    .on("tick", tick)
    .start();

    var node = svg.selectAll("rect")
    var node = svg.selectAll("circle")
    .data(nodes)
    .enter().append("rect")
    .attr("width", function(d) { return d.r * 2; })
    .attr("height", function(d) { return d.r * 2; });
    .enter().append("circle")
    .attr("r", function(d) { return d.r; });

    function tick(e) {
    node.each(gravity(e.alpha * .1))
    .each(collide(.5))
    .attr("x", function(d) { return d.x - d.r; })
    .attr("y", function(d) { return d.y - d.r; });
    .attr("cx", function(d) { return d.x; })
    .attr("cy", function(d) { return d.y; });
    }

    function gravity(k) {
    @@ -96,19 +98,14 @@
    if (quad.point && (quad.point !== node)) {
    var x = node.x - quad.point.x,
    y = node.y - quad.point.y,
    lx = Math.abs(x),
    ly = Math.abs(y),
    l = x * x + y * y,
    r = nr + quad.point.r;
    if (lx < r && ly < r) {
    if (lx > ly) {
    lx = (lx - r) * k * (x < 0 ? -1 : 1);
    node.x -= lx;
    quad.point.x += lx;
    } else {
    ly = (ly - r) * k * (y < 0 ? -1 : 1);
    node.y -= ly;
    quad.point.y += ly;
    }
    if (l < r * r) {
    l = ((l = Math.sqrt(l)) - r) / l * k;
    node.x -= x *= l;
    node.y -= y *= l;
    quad.point.x += x;
    quad.point.y += y;
    }
    }
    return x1 > nx2 || x2 < nx1 || y1 > ny2 || y2 < ny1;
  6. @mbostock mbostock created this gist Nov 11, 2012.
    1 change: 1 addition & 0 deletions README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    This is not a true Demers cartogram; it lacks links between adjacent features. Instead of trying to preserve connectedness, this psuedo-cartogram tries to preserve locality, putting each square as close as possible to its origin without overlapping.
    120 changes: 120 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,120 @@
    <!DOCTYPE html>
    <meta charset="utf-8">
    <title>Demers Cartogram</title>
    <style>

    rect {
    fill: #eee;
    stroke: #000;
    stroke-width: 1.5px;
    }

    </style>
    <body>
    <script src="http://d3js.org/d3.v3.min.js"></script>
    <script>

    // Ratio of Obese (BMI >= 30) in U.S. Adults, CDC 2008
    var valueById = [
    NaN, .187, .198, NaN, .133, .175, .151, NaN, .100, .125,
    .171, NaN, .172, .133, NaN, .108, .142, .167, .201, .175,
    .159, .169, .177, .141, .163, .117, .182, .153, .195, .189,
    .134, .163, .133, .151, .145, .130, .139, .169, .164, .175,
    .135, .152, .169, NaN, .132, .167, .139, .184, .159, .140,
    .146, .157, NaN, .139, .183, .160, .143
    ];

    var margin = {top: 0, right: 0, bottom: 0, left: 0},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom,
    padding = 3;

    var projection = d3.geo.albersUsa();

    var radius = d3.scale.sqrt()
    .domain([0, d3.max(valueById)])
    .range([0, 30]);

    var force = d3.layout.force()
    .charge(0)
    .gravity(0)
    .size([width, height]);

    var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

    d3.json("../3750900/us-state-centroids.json", function(error, states) {
    var nodes = states.features
    .filter(function(d) { return !isNaN(valueById[+d.id]); })
    .map(function(d) {
    var point = projection(d.geometry.coordinates),
    value = valueById[+d.id];
    if (isNaN(value)) fail();
    return {
    x: point[0], y: point[1],
    x0: point[0], y0: point[1],
    r: radius(value),
    value: value
    };
    });

    force
    .nodes(nodes)
    .on("tick", tick)
    .start();

    var node = svg.selectAll("rect")
    .data(nodes)
    .enter().append("rect")
    .attr("width", function(d) { return d.r * 2; })
    .attr("height", function(d) { return d.r * 2; });

    function tick(e) {
    node.each(gravity(e.alpha * .1))
    .each(collide(.5))
    .attr("x", function(d) { return d.x - d.r; })
    .attr("y", function(d) { return d.y - d.r; });
    }

    function gravity(k) {
    return function(d) {
    d.x += (d.x0 - d.x) * k;
    d.y += (d.y0 - d.y) * k;
    };
    }

    function collide(k) {
    var q = d3.geom.quadtree(nodes);
    return function(node) {
    var nr = node.r + padding,
    nx1 = node.x - nr,
    nx2 = node.x + nr,
    ny1 = node.y - nr,
    ny2 = node.y + nr;
    q.visit(function(quad, x1, y1, x2, y2) {
    if (quad.point && (quad.point !== node)) {
    var x = node.x - quad.point.x,
    y = node.y - quad.point.y,
    lx = Math.abs(x),
    ly = Math.abs(y),
    r = nr + quad.point.r;
    if (lx < r && ly < r) {
    if (lx > ly) {
    lx = (lx - r) * k * (x < 0 ? -1 : 1);
    node.x -= lx;
    quad.point.x += lx;
    } else {
    ly = (ly - r) * k * (y < 0 ? -1 : 1);
    node.y -= ly;
    quad.point.y += ly;
    }
    }
    }
    return x1 > nx2 || x2 < nx1 || y1 > ny2 || y2 < ny1;
    });
    };
    }
    });

    </script>