Use the d3 force

Simulation Control panel

The simulation is running

Add a force

Active forces

Usually, we position elements on our web pages in static, explicit places. But what if we want to make them feel more alive, or move them based on loose rules?

Then, we have to use the force. The d3-force.

d3-force

d3-force is a module in the d3.js API that runs a simulation, moving a set of particles on every "tick".

To create a new simulation, we can use d3.forceSimulation().

d3.forceSimulation() takes one parameter: the array of particles that we want to move about. These particles will each be an object:

const particles = [
  {
    // particle 1
    // data about the particle here, for example:
    date: "2020-11-23",
  },
  {
    // particle 2
    date: "2020-11-23",
  },
  // ...
]
d3.forceSimulation(particles)

To start our particles in a specific location, we can specify that by adding an x and y key to the object. If we don't specify an initial location, our particles will start in a Phyllotaxis arrangement.

Once our simulation is created, we'll move our particles according to a set of forces.

The x force

There are several built-in forces that we can use with a d3-force simulation. The first I'll teach you is the x force.

The x force urges our particles to move towards a specific x (horizontal) position.

Add new x forces (in the Simulation Control Panel) to our active forces, and move the sliders to change the targeted x position.

d3.forceSimulation()

.force("x", d3.forceX())

When adding a new force, we call the simulation's .force() method, passing two parameters: a name (for later cancelling the force) and the force function itself.

We can also specify a function, using the provided parameters (the particle, and the index of the particle). Try this by clicking buckets or in a line.

But this x force isn't very powerful on its own. Let's learn some other ones! Much to learn you still have, my young padawan.

The y force

The y force is very similar to the x force, but moves our particles vertically.

Try moving the y force around.

d3.forceSimulation()

.force("y", d3.forceY())

The collide force

This is my favorite force! The collide force checks each particle to see if it's colliding with another particle. If so, it will move both particles away from each other.

d3.forceSimulation()

.force("collide", d3.forceCollide())

Our particles have run amok! Let's learn a way to keep them from spreading out too far.

Using multiple forces

We can use as many forces as we want! Let's add an x force and y force to keep our particles close to the middle of our screen.

d3.forceSimulation()
  .force("x", d3.forceX())
  .force("y", d3.forceY())
  .force("collide", d3.forceCollide())

Some forces may counteract each other. Control which one is stronger by changing their strength.

d3.forceSimulation()
  .force("x", d3.forceX().strength())
  .force("y", d3.forceY().strength())
  .force("collide", d3.forceCollide().strength())

Ticking the simulation

The simulation works by running a tick function on every layout frame. We've paused the simulation using simulation.stop() - hit the tick button (in the top left) to run simulation.tick() and step through one frame at a time.

Our collide force can also run multiple times per frame - set the number of times it runs by changing its iterations. This can help with jittering simulations, where the collide force fights against other forces.

d3.forceSimulation()
  .force("x", d3.forceX())
  .force("y", d3.forceY())
  .force("collide", d3.forceCollide().iterations())

The radial force

The radial force moves the particles towards the edge of a circle. We can change the radius of that circle, and also its x and y position.

The many body force

The many body force affects how the particles interact with each other and is the closest we get to simulate physics - a negative strength mimics repulsion and a positive strength mimics gravity.

Because this force causes particles to affect each other, we can get interesting behavior like clumping. See if you can cause our particles to glom into distinct groups.

The center force

The center force may seem like a repeat of our x force and y force, but it's actually very different.

Instead of zooming our particles around, the center force will move the entire particle system so that it's centered at a specific spot. This is helpful for keeping our particles centered in our screen, but not modifying other active forces.

The link force

The link force is great for network diagrams, similar to this infographic from the South China Morning Post.

We pass an array of links (objects with a source and a target) to tell our link force which particles are connected.

d3.forceSimulation()
  .force("link", d3.forceLinks([
    {source: 0, target: 1},
    {source: 1, target: 2},
    // ...
  ]))

These values correspond to each particle's id, which defaults to its index in the particles array.

Custom forces

Here is where we learn the true power of forces - we can make custom ones to move our particles in any way we can imagine!

For example, we could create a bounding force that keeps our particles within x and y positions.

This force could be really helpful for making sure our particles stay on screen.

Go and make your own custom forces! If you make your own force, ping me on Twitter and I'll start a list here!