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
xxxxxxxxxx<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 groupvar 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 movimentarvar 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