D3-fuse

This is a demonstration of d3-fuse, a clustering library that allows the visual fusion of nodes that are overlapping.

The branching tree on each node cluster shows the nodes that comprise that cluster based on node overlap. Due to a moving center of gravity between each step of the clustering process and radii of the clustered nodes, trees can extend slightly beyond the node disc.

This is an initial attempt at a clustering library that doesn't rely on d3-force, though the short code of d3-fuse is borrows considerably from d3.forceCollide.

In this demonstration the mouse wheel will simulate a zoom by increasing/decreasing circle radii.

<!DOCTYPE html>
<meta charset="utf-8">
<canvas width="960" height="600"></canvas>
<script src="https://d3js.org/d3.v5.min.js"></script>
<script src="d3-fuse.js"></script>
<script>
var canvas = d3.select("canvas"),
  ctx = canvas.node().getContext("2d"),
  width = +canvas.attr("width"),
  height = +canvas.attr("height");
  
// Create nodes:
var nodes = d3.range(10000).map(function() {
  return {
    r: 3.25,
    a: Math.PI,
    x: Math.random()*width,
    y: Math.random()*height	
  }
})

// Set up cluster
var cluster = d3.fuse()
  .nodes(nodes);

draw(cluster());

// Modify circle radius with zoom scale:
var zoom = d3.zoom()
  .on("zoom", function() {
    var k = Math.pow(d3.event.transform.k, 0.3);
    // Modify nodes' radii/area (simulated zoom):
    nodes.forEach(function(node) {
      node.r = 3.25 * k;
      node.a = Math.PI * node.r * node.r;	
    })
    draw(cluster());
})

canvas.call(zoom);

// Drawing functions:
function draw(nodes) {
  ctx.clearRect(0,0,width,height);
  nodes.filter(function(d) { return d.layout.r != 0; }).forEach(drawCircle);
  nodes.forEach(drawLink);
  nodes.filter(function(d) { return d.layout.r > 20; }).forEach(drawText);
}
function drawLink(d) {
  d = d.layout;
  if(d.parent.x && d.parent.y) {
    ctx.beginPath()
    ctx.strokeStyle = "#ccc";
    ctx.moveTo(d.x,d.y)
    ctx.lineTo(d.parent.layout.x,d.parent.layout.y)
    ctx.stroke();
  }
}
function drawCircle(d) {
  d = d.layout;
  ctx.fillStyle = d.r ? ( d.r > 20 ? "#a8ddb5" : "#43a2ca"  ) : "#0868ac";
  ctx.beginPath();
  ctx.moveTo(d.x, d.y);
  ctx.arc(d.x, d.y, d.r, 0, 2 * Math.PI);
  ctx.fill();
}
function drawText(d) {
  d = d.layout;
  ctx.font = d.r / 3 + "px Arial";
  ctx.textAlign = "center";
  ctx.fillStyle = "white";
  ctx.fillText(d.count,d.x,d.y+d.r/9); 
}
  
</script>

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