[deprecated] Multiple sizes of groups of 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

forked from ocarneiro's block: Grouped dots

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

var data = [40, 3, 5, 10, 2, 1, 2, 0, 4, 1, 0, 1, 3, 0]

// cria 7 grupos de bolinhas e atribui o atributo group
var node_gen = function() {
  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};})
     nodes = nodes.concat(n)
   }
  }
  return nodes;
}

var node_objects = node_gen();

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;  
}
  
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")

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>

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