RefMet/CHEAR Overlap

This clustered force layout is implemented using two custom forces. The first, cluster, pushes nodes towards the largest node of the same color. A second collide force prevents circles from overlapping by detecting collisions.

This example uses custom gravity applied only to the largest node of each color; compare to standard gravity.

forked from mbostock's block: Clustered Force Layout II

forked from anonymous's block: RefMet/CHEAR Overlap

<!DOCTYPE html>
<meta charset="utf-8">
<body>
<script src="//d3js.org/d3.v3.min.js"></script>
<script>

var width = 1000,
    height = 1000,
    padding = 2,  // separation between same-color circles
    clusterPadding = 6, // separation between different-color circles
    maxRadius = 12;

var nodes = 
[{"radius": 21, "name": "Organooxygen Compound"}, {"radius": 1, "name": "Salt"}, {"radius": 1, "name": "Heterocyclic Compound"}, {"radius": 4, "name": "Organochlorine Compound"}, {"radius": 1, "name": "Nucleoside Phosphate"}, {"radius": 10, "name": "Carbonyl Compound"}, {"radius": 36, "name": "Carbohydrate Derivative"}, {"radius": 6, "name": "Benzenoid Aromatic Compound"}, {"radius": 26, "name": "Organohalogen Compound"}, {"radius": 1, "name": "Fatty Acid"}, {"radius": 1, "name": "Steroid"}, {"radius": 7, "name": "Ester"}, {"radius": 2, "name": "Phenols And Derivatives"}, {"radius": 4, "name": "Carboxylic Acid"}, {"radius": 4, "name": "Amino Acids, Peptides, And Analogues"}, {"radius": 1, "name": "N-Alkylpyrrolidine"}];

var clusters = new Array(nodes.length);

var color = d3.scale.category10()
    .domain(d3.range(nodes.map(function(d){return d.name})));

var force = d3.layout.force()
    .nodes(nodes)
    .size([width, height])
    .gravity(0.25)
    .charge(0)
    .on("tick", tick)
    .start();

d3.select("body svg").remove();
  
var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

var radius = d3.scale.sqrt()
	.domain(d3.extent(nodes, function(d){return d.radius}))
	.range([30,70]);
  
nodes.forEach(function(d) {
  d.r = radius(d.radius);
});

var nodeGroup = svg.selectAll("g")
	.data(nodes)
	.enter().append("g");
  
var circle = nodeGroup.append("circle")
    .attr("r", function(d) { return d.r; })
    .style("fill", function(d) { return color(d.name); })
		.style("fill-opacity",0.75)
    .call(force.drag);

// Resolves collisions between d and all other circles.
function collide(alpha) {
  var quadtree = d3.geom.quadtree(nodes);
  return function(d) {
    var r = d.r + padding,
        nx1 = d.x - r,
        nx2 = d.x + r,
        ny1 = d.y - r,
        ny2 = d.y + r;
    quadtree.visit(function(quad, x1, y1, x2, y2) {
      if (quad.point && (quad.point !== d)) {
        var x = d.x - quad.point.x,
            y = d.y - quad.point.y,
            l = Math.sqrt(x * x + y * y),
            r = d.r + quad.point.r;
        if (l < r) {
          l = (l - r) / l * alpha;
          d.x -= x *= l;
          d.y -= y *= l;
          quad.point.x += x;
          quad.point.y += y;
        }
      }
      return x1 > nx2 || x2 < nx1 || y1 > ny2 || y2 < ny1;
    });
  };
}

</script>

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