Force directed graph: popping

This graph exploits the unstable effects of setting the forceCollide strength parameter outside of [0,1].

//High strength value causes unstable effects  
var collide_force = d3.forceCollide(radius)
    .strength(10);

The result is a kind of “popping effect” as the nodes violently push each other away.

Here’s another example.

This graph takes out the link force, sets the strength parameter for forceCollide to an unstable value, and implements an attractive force between particles.

There’s also a bounding box that limits how far particles get “thrown” when they collide with each other.

Here’s the code for these forces.

//strong attractive force brings nodes towards each other
var charge_force = d3.forceManyBody()
    .strength(200);

//centering force brings nodes towards the centre of the box
var center_force = d3.forceCenter(width / 2, height / 2);  

//popping behaviour for force strength values above 1
var collide_force = d3.forceCollide(radius)
    .strength(15);   
     
//bounding box 
function box_force(alpha) { 
  for (var i = 0, n = nodes_data.length; i < n; ++i) {
    curr_node = nodes_data[i];
    curr_node.x = Math.max(radius, Math.min(width - radius, curr_node.x));
    curr_node.y = Math.max(radius, Math.min(height - radius, curr_node.y));
  }
}
     
simulation
    .force("charge_force", charge_force)
    .force("center_force", center_force)
    .force("box_force",box_force)
    .force("collide", collide_force)
 ;

I’m sure there’s probably some interesting applications of this effect!

Hope you found that useful! Click here to view to the rest of the force directed graph series.