html5devconf force

_.md

[ Launch: html5devconf scatter ] 7113356 by enjalot
[ Launch: html5devconf time axis ] 7113284 by enjalot
[ Launch: html5devconf time scale ] 7113227 by enjalot
[ Launch: html5devconf linear scale ] 7113193 by enjalot
[ Launch: html5devconf starter ] 7112845 by enjalot

config.json

{"description":"html5devconf force","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"survey.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}},"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/lCg3bCK.png"}

inlet.js

//this is using data from twitter survey
//http://bit.ly/advd3presurvey
//multi foci: http://bl.ocks.org/mbostock/1021953
//collision: http://bl.ocks.org/mbostock/3231298

var results = tributary.survey;
results.forEach(function(d) { 
  d.evil = +d.evil;
  d.passion = +d.passion;
  d.age = +d.age || 0;
  d.exp = +d.exp;
  d.time = new Date(d.time);
})

var qmap = {
  time: {q: "Timestamp"},
  pb: {q: "What type of peanut butter do you prefer?", a: ["Crunchy", "Smooth"]},
  toothpaste: {q:"Where do you squeeze the toothpaste from?", a: ["Top", "Bottom"]},
  cv: {q:"Vanilla or Chocolate?", a: ["Chocolate", "Vanilla"]},
  tp: {q:"What direction does toilet paper go on the holder thingy?", a: ["Over", "Under"]},
  oj: {q:"Do you prefer pulp or no pulp in your orange juice?", a: ["Pulp", "No pulp"]},
  evil: {q:"Where do you sit on the good vs. evil scale?"},
  age: {q:"How old are you?"},
  passion: {q:"How passionate of a person are you?"},
  exp: {q:"How many years have you been building for the web?"}
}
var fields = Object.keys(qmap);

var questions = [
  "pb", "toothpaste", "cv", "tp", "oj"
]

var field = questions[0];

var colorScale = d3.scale.ordinal()
.domain(qmap[field].a)
.range(["#000FFF", "#FF0000"])

var xScale = d3.scale.linear()
.domain([1,8])
.range([0, 700])
var yScale = d3.scale.linear()
.domain([1,10])
.range([0, 700])


var rScale = d3.scale.sqrt()
.domain(d3.extent(results, function(d) { return d.age }))
.range([5, 20])


var svg = d3.select("svg")
var circles = svg.selectAll("circle")
.data(results)
circles.enter().append("circle")

circles
.attr({
  r: function(d) { d.radius = rScale(d.age); return d.radius }
}).style({
  "fill-opacity": 0.2,
  fill: function(d) { return colorScale(d[field]) }
})


var force = d3.layout.force()
.charge(0)
.nodes(results)
.size([700, 700])

force.on("tick", function(e) {
  var q = d3.geom.quadtree(results);
  results.forEach(function(d) { q.visit(collide(d)) });
  var k = 0.1 * e.alpha;
  svg.selectAll("circle")
  .attr({
    cx: function(d) { 
      return d.x += (xScale(d.passion) - d.x) * k;
    },
    cy: function(d) {
      return d.y += (yScale(d.evil) - d.y) * k;
    }
  })
});
force.start();


function collide(node) {
  var r = node.radius + 10,
      nx1 = node.x - r,
      nx2 = node.x + r,
      ny1 = node.y - r,
      ny2 = node.y + r;
  return 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,
          l = Math.sqrt(x * x + y * y),
          r = node.radius + quad.point.radius;
      if (l < r) {
        l = (l - r) / l * .5;
        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;
  };
}

survey.csv