D3 Examples - [broken] Dynamic groups of dots (d3 v3)

[broken] Dynamic groups of dots (d3 v3)
There's a button!
Dots colored by a property named group.
Dots can be dragged like in my Draggable dots block.
reference for updating data: /mbostock/3808218
xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<body>
<script src="//d3js.org/d3.v3.min.js"></script>
<div id="option">
    <input name="updateButton" 
                 type="button" 
                value="Update" 
                onclick="updateData()" />
</div>
<script>
​
var width = 800,
    height = 600;
​
var color = d3.scale.category10();  // escala com 10 cores (category10)
​
var groups = 7;
​
//var data = 
​
var node_gen = function(node_data) {
  var data = node_data
  var nodes = new Array();
  for (i=0; i < 7; i++){
    if (data[i] > 0) {
     var n = d3.range(data[i]).map(function(d) {return {
                                                                    radius: 8, group: i, 
                                                                    //x:300, y: 300
                                                                        };}
                                  );
     nodes = nodes.concat(n)
   }
  }
  return nodes;
}
​
var node_objects = node_gen([40, 3, 5, 10, 2, 1, 2, 0, 4, 1, 0, 1, 3, 0]);
​
var force = d3.layout.force()
    .nodes(node_objects)
    .size([width, height]);
​
force.start();
​
var svg = d3.select("body").append("svg")
    .attr("width", width + 200)
    .attr("height", height);
  
var circles = svg.selectAll("circle")
    .data(node_objects)
    .enter().append("circle")
    .attr("r", function(d) { return d.radius; })
    .style("fill", function(d, i) { return color(d.group); })
      .call(force.drag);
​
// reagrupa os pontos (o). i é o índice da lista
// k é a velocidade com que "o" deve se movimentar
var regroup = function(o, i, k) {
​
    var m = Math.floor(groups/2);
    o.x += (o.group - m) * k;
    o.y += o.group & 1 ? k : -k;  
}
  
var survey = svg.append("text")
  .text("Survey")
  .attr("x", 80)
  .attr("y", 160)
  .style("font-size", 24)
  .style("font-family", "monospace")
​
svg.append("text")
  .text("Field Research")
  .attr("x", 240)
  .attr("y", 200)
  .style("font-size", 24)
  .style("font-family", "monospace")
​
svg.append("text")
  .text("Case Study")
  .attr("x", 450)
  .attr("y", 160)
  .style("font-size", 24)
  .style("font-family", "monospace")
​
svg.append("text")
  .text("Lab Experiment")
  .attr("x", 600)
  .attr("y", 200)
  .style("font-size", 24)
  .style("font-family", "monospace")
​
svg.append("text")
  .text("Secondary Data")
  .attr("x", 80)
  .attr("y", 460)
  .style("font-size", 24)
  .style("font-family", "monospace")
​
svg.append("text")
  .text("Content Analysis")
  .attr("x", 340)
  .attr("y", 400)
  .style("font-size", 24)
  .style("font-family", "monospace")
​
svg.append("text")
  .text("Qualitative Research")
  .attr("x", 550)
  .attr("y", 460)
  .style("font-size", 24)
  .style("font-family", "monospace")
​
var updateData = function() {
  survey.text("oi");
  //console.log("updated!");
  var data = [2, 53, 15, 0, 2, 1, 0, 4, 1, 0, 1, 3, 0];
  node_objects = node_gen(data);
  //force.nodes(node_objects);
  circles.data(node_objects).call(force.drag)
      .attr("cx", function(d) { return d.x; })
      .attr("cy", function(d) { return d.y; });
  //new_circles.exit().remove()
}
​
force.on("tick", function(e) {
  
  // k é a velocidade com que os pontos se movem
  var k = (groups * 0.6) * e.alpha;  // alpha é o calor da simulação
  
  node_objects.forEach(function(o, i) {
    regroup(o, i, k);
  });  
​
  svg.selectAll("circle")
      .attr("cx", function(d) { return d.x; })
      .attr("cy", function(d) { return d.y; });
});
​
</script>
​
    