Maps: Bubbles

_.md

[ Launch: Maps: Rects ] dc37b9de29bee8223589 by poezn
[ Launch: Maps: Choropleth ] afc3025d053dc6819486 by poezn
[ Launch: Choropleth Test ] 08e7b610d21e4d8357a6 by poezn
[ Launch: Choropleth Test ] 7494487 by poezn

config.json

{"description":"Maps: Bubbles","endpoint":"","display":"svg","public":true,"require":[{"name":"TopoJSON","url":"http://d3js.org/topojson.v1.min.js"}],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"data.csv":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"us.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"styles.css":{"default":true,"vim":false,"emacs":false,"fontSize":12},"grid.tsv":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"pingpong","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"thumbnail":"http://i.imgur.com/c1WnPko.png","ajax-caching":true,"inline-console":true}

data.csv

grid.tsv

inlet.js

var dataValues = tb.data;
var dataGrid = tb.grid;
var dataUs = tb.us;

var values = {},
    lookup = {};

var w = 63,
    padding = w/15,
    clusterPadding = 1, // separation between different-color circles
    maxRadius = 11;

var projection = d3.geo.albersUsa()
    .scale(1000)
    .translate([473, 272]);

var path = d3.geo.path()
.projection(projection);

var columnMetric = "avgshare08_12",
    columnMetricSize = "workers2013",
    columnStateName = "state";
    columnStateNameShort = "stab";

_.each(dataValues, function(d) {
  values[d[columnStateNameShort]] = {
    "value": +d[columnMetric],
    "valueSize": +d[columnMetricSize],
    "id": d[columnStateNameShort],
    "label": d[columnStateName]
  }
  lookup[d[columnStateName]] = d[columnStateNameShort];
});

_.each(dataGrid, function(d) {
  values[d[columnStateNameShort]]["grid"] = {
    "row": +d.row,
    "col": +d.col
  };
});

_.each(topojson.feature(dataUs, dataUs.objects.states, function(a, b) { return a !== b; }).features, function(d) {
  values[lookup[d.id]]["feature"] = d;
});

var max = d3.max(_.chain(values).values().pluck("value").value());
// max = 15;	
console.log(max);

var foci = {};
_.each(values, function(d, code) {
  var coords = d3.geo.centroid(d.feature);
  foci[code] = projection(coords);
  values[code].x = foci[code][0];
  values[code].y = foci[code][1]; 
});


var width = 960,
    height = 500;

var quantize = d3.scale.quantize()
    .domain([0, max])
    .range(d3.range(4).map(function(i) { return "q" + i + "-4"; }));

var rScale = d3.scale.sqrt()
.domain([0, d3.max(_.values(values), function(d, i) { return d.valueSize })])
.range([0, 40]);

values = _.map(values, function(d) {
  d.radius = rScale(d.valueSize ? d.valueSize : 0)
  return d;
})

var svg = g; 

var node = g.selectAll("g.node");


function ready() {
  node = node.data(_.values(values));
  
  svg.selectAll("path.state")
  .data(topojson.feature(dataUs, dataUs.objects.states, function(a, b) { return a !== b; }).features)
  .enter().append("path")
  .attr("class", function(d) { return "state " + quantize(values[d.id]); })
  .attr("d", path);
  
  var bubbles = node.enter().append("g")
  .attr({
    "class": function(d) { return "node " + quantize(d.value); },
    "id": function(d) { return "bubble-" + d.id },
    "transform": function(d) {
      return "translate(" + foci[d.id].join(" ") + ")"
    }
  })
  .call(force.drag);
  
  bubbles
  .append("circle")
  .attr({
    "class": "bubble",
    "cx": 0,
    "cy": 0,
    "r": function(d, i) {
      return rScale(d.valueSize);
    }
  });
  
  
  bubbles
  .append("text")
  .attr({
    "text-anchor": "middle",
    "transform": function(d, i) {
      var ty = 2,
          tx = 0;
      return "translate(" + [tx, ty].join(" ") + ")"
    },
    "fill": "#FFF",
    "font-size": 9
  })
  .text(function(d, i) {
    return d.id
  });
  
  
  force.start();

}

// Resolves collisions between d and all other circles.
function collide(alpha) {
  var quadtree = d3.geom.quadtree(_.values(values));
  return function(d) {
    var r = d.radius + maxRadius + Math.max(padding, clusterPadding),
        nx1 = d.x - r,
        nx2 = d.x + r,
        ny1 = d.y - r,
        ny2 = d.y + r;
    quadtree.visit(function(quad, x1, y1, x2, y2) {
      if (quad.point && (quad.point !== d)) {
        var x = d.x - quad.point.x,
            y = d.y - quad.point.y,
            l = Math.sqrt(x * x + y * y),
            r = d.radius + quad.point.radius + (d.cluster === quad.point.cluster ? padding : clusterPadding);
        if (l < r) {
          l = (l - r) / l * alpha;
          d.x -= x *= l;
          d.y -= y *= l;
          quad.point.x += x;
          quad.point.y += y;
        }
      }
      return x1 > nx2 || x2 < nx1 || y1 > ny2 || y2 < ny1;
    });
  };
}

var nodes = _.values(values);

function tick(e) { 
  var k = 0.1 * e.alpha;

  // Push nodes toward their designated focus.
  _.each(nodes, function(o, i) {   
    o.y += (foci[o.id][1] - o.y) * k;
    o.x += (foci[o.id][0] - o.x) * k; 
    o.coords = [o.x, o.y]
  });
  
  _.each(nodes, collide(0.5));

  node.attr("transform", function(d) { return "translate(" + [d.x, d.y].join(" ") + ")"; })
 
} 

var force = d3.layout.force()
    .nodes(values)
    .links([])
    .gravity(0)
    .charge(function(d, i) {
      return -d.valueSize * 1000
    })
.linkDistance(function(d, i) {
  return rScale(d.valueSize)
})
.on("tick", tick);

ready();

styles.css

.counties {
  fill: none;
}

.state {
  stroke-linejoin: round;
  font-size: 14px;
  fill: #FFFFFF;
  stroke: #ededed;
  stroke-width: 1;
}

#display {
  background-color: #FFFFFF;
}

.node circle {
  stroke: #ededed;
  stroke-width: 2;
}

.q0-4 text { fill: #001966; }
.q1-4 text { fill: #001966; }
.q2-4 text { fill: #001966; }
.q3-4 text { fill: #d8e9f7; }


.q0-4 rect { fill: #eff3ff; }
.q1-4 rect { fill: #bdd7e7; }
.q2-4 rect { fill: #6baed6; }
.q3-4 rect { fill: #2171b5; }

.q0-4 circle { fill: #eff3ff; }
.q1-4 circle { fill: #bdd7e7; }
.q2-4 circle { fill: #6baed6; }
.q3-4 circle { fill: #2171b5; }

us.json