var width = 960,
    height = 500,
    root,
    node1,
    link;

var color = d3.scale.category20();



var force = d3.layout.force()
    .charge(-350)
    .linkDistance(100)
    .gravity(2)
    .size([width, height])
    .on("tick", tick);

var svg = d3.select("#chart").append("svg")
    .attr("width", width)
    .attr("height", height);
    
function tick(e) {
  var q = d3.geom.quadtree(root.nodes),
      i = 0,
      n = root.nodes.length;

  while (++i < n) q.visit(collide(root.nodes[i]));
  link
      .transition()
      .duration(100)
      .attr("x1", function(d) { return d.source.x; })
      .attr("y1", function(d) { return d.source.y; })
      .attr("x2", function(d) { return d.target.x; })
      .attr("y2", function(d) { return d.target.y; });
        
  node1
      .attr("cx", function(d) { return d.x; })
      .attr("cy", function(d) { return d.y; });
}

function collide(node) {
 // change radius to count
 // node.count + 16
  var r = node.count + 16,
      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;
  };
}

//miserables.json
d3.json("0471081124_force.json", function(json) {
  root = json;
    root.radius = 0;
    root.fixed = true;
  force
      .nodes(json.nodes)
      .links(json.links)
      .start();

   link = svg.selectAll("line.link")
      .data(json.links)
    .enter().append("line")
      .attr("class", "link")
      .style("stroke-width", function(d) { return Math.sqrt(d.value); });

   node1 = svg.selectAll("circle.node")
      .data(json.nodes)
    .enter().append("circle")
      .attr("class", "node")
      // d.count + 5
      .attr("r", function(d) {return d.count + 5; })
      .style("fill", function(d) { return color(d.group); })
      .call(force.drag);

  node1.append("title")
      .text(function(d) { return d.name; });

  force.on("tick", tick);
  });