All examples By author By category About

larsvers

Force split/unite playground

..to play around with splitting and re-uniting nodes. This can surely happen in numbers as it's canvas but I'd stay below a total of 5k nodes.

The only forces to keep this aesthetic were:

  1. a low alpha of 0.3 (0.2 on split and unite)
  2. a low repulsion with d3.forceManyBody().strength(-5)
  3. a radius-appropriate colliding force with d3.forceCollide(2) (2 is the radius)
  4. and a relatively high position strength with d3.forceX(width/2).strength(.7) (ame for .forceY)

Box-bounded toggles the constraint for the nodes to stay canvas-bound. Really simple 2 lines of code in the ticked() function:

    d.x = Math.max(d.radius, Math.min(width - d.radius, d.x));
    d.y = Math.max(d.radius, Math.min(height - d.radius, d.y));	
  

It takes either the current value of d.x or (if that's higher than the width minus the radius) the edge of the canvas. If this is smaller than the radius (in keeping this would be 0 + radius) it shall take that minimum position on the left. Whatever it takes, it overwrites the current value of d.x. Same for d.y.

Mike Bostock suggests to use forces to keep simulations within bounds, but sometimes you need to force them, I guess.

Built with blockbuilder.org