D3 Examples - [deprecated] Grouped dots (d3 v3)

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<body>
<script src="//d3js.org/d3.v3.min.js"></script>
<script>
​
var width = 800,
    height = 600;
​
var color = d3.scale.category10();  // escala com 10 cores (category10)
​
var groups = 7;
  
// 200 bolinhas (range) de mesmo tamanho (radius)
// cria grupo a cada resto de divisão pela qtde de grupos
var nodes = d3.range(200).map(function(d) { return {radius: 8, group: d%groups}; });
​
var force = d3.layout.force()
    .nodes(nodes)
    .size([width, height]);
​
force.start();
​
var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);
  
var node = svg.selectAll("circle")
    .data(nodes.slice(1))
    .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;  
}
  
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
  
  nodes.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>
​
    