[deprecated] Grouped dots (d3 v3)

Dots colored by a property named group.

Dots can be dragged like in my Draggable dots block.

forked from mbostock's block: Collision Detection

with code from mbostock's block: Multi-Foci Force Layout

<!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>

https://d3js.org/d3.v3.min.js