D3 Marker Clustering

This block demonstrates a clusterer. When zooming on the canvas the radius of each circle is increased/decreased. SCroll in to start clustering.

For a geographic demonstration see this block

Where circles overlap, circles are clustered into a larger circle with an area equal to the chldren. When a circle gets sufficiently large, the number of circles that were merged to form it is shown.

This block contains 10 000 nodes (reset at each zoom level) and uses canvas. I've had decent results up to 100 000 nodes.

Current Github Repository

More info:

I've been intrigued about making a d3 marker clusterer for some time.

My initial thoughts were to use a voronoi/delaunay approach, but I realized that a d3 force layout could do the job. The d3-cluster module is a stripped down and modified version of d3-force, which allows efficient calculations while still retaining the power to customize the visualization.

This block is the proof of concept, I hope to refine the module over the next few days to offer a number of refinements. These refinements include tracking nodes in the cluster; accessor functions for x,y,r and area; and a node reset method.

d3.cluster()

Creates a new cluster layout.

cluster.nodes()

Adds nodes to the cluster.

As with d3-force, nodes are positoined with node.x, node.y. These values must be provided as initial locations for the nodes. Currently the coordinates must be located at node.x, node.y, however I intend to add an accessor method for different properties or functions.

Nodes can include a node.a property which indicates node area/weight. Alternatively you can specify a node.r which specifies a node radius.

When nodes merge, the area/weight of the node is used to proportinatly center the node. Radius is calculated as a convience for marker generation.

When two nodes merge the one with the greater area/weight gains the area/weight of the smaller node. The small node's area/weight and radius is converted to zero. Nodes that have merged have their node.collided property set to true.

Nodes can also have a count property, this could be set to 1, as with areas/weights, larger nodes absorb the count of smaller nodes when clustering. This can allows the clustered node to indicate how many nodes are contained in the cluster.

cluster.alpha(), cluster.alphaDecay(), cluster.stop(), cluster.restart(), cluster.find(), cluster.on(), cluster.alphaTarget(), cluster.alphaMin()

These act the same as with d3-force. Alpha decay is set to 0.04 by default as compared with d3-force.

cluster.clusterer(clusterer)

Takes a d3.clusterer() which is a modified d3-force collide force. No name is provided as with d3-force forces. The default value is d3.clusterer().radius(function(d) { return d.r; })

d3.clusterer()

The clusterer handles the mechanics of the clustering and is a modified d3-force collide force.

d3.clusterer() has the same methods as a d3-force collide force, but has been altered internally. No vx or vy properties will be considered in positioning.

<!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-cluster.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() {
   var node = {};
   node.x = Math.random()*width;
   node.y = Math.random()*height;
   node.y1 = node.y;  // y1,x1 = original placement.
   node.x1 = node.x;
   node.r = 1;
   node.a = Math.PI * node.r * node.r;
   return node;
})

// Set up cluster
var cluster = d3.cluster()
      .nodes(nodes)
      .on("tick", ticked);
	  
// Tick function:
function ticked() {
  // clear canvas:
  ctx.clearRect(0, 0, width, height);

// Update cluster nodes:
  this.nodes(nodes.filter(function(d) { return d.r != 0; }))

// draw still active nodes:
  nodes.filter(function(d) { return d.r != 0; })
    .forEach(drawCircle)

}

// Modify circle radius with zoom scale:
var zoom = d3.zoom()
  .on("zoom", function() {
	// Reset nodes to restart cluster at each scale level:
	nodes.forEach(function(node) {
    node.r = 1 * Math.pow(d3.event.transform.k,0.3);
    node.a = Math.PI * node.r * node.r;	
    node.collided = false;
    node.x = node.x1;
    node.y = node.y1;
    node.count = 1;
  })
	
  // Restart the simulation
  cluster.stop();
  cluster.nodes(nodes)
    .alpha(1)
    .restart();
})
  
canvas.call(zoom);

// Drawing functions:
function drawCircle(d) {
    ctx.fillStyle = d.collided ? ( 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();
	
	if(d.r > 20) drawText(d);
}
function drawText(d) {
	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