Data Visualization with D3 4.x Cookbook - Second Edition

Using gravity and charge

In this recipe, we will introduce you to the first two fundamental forces: gravity and charge. As we have mentioned before, one objective of force layout's design is to loosely simulate the motion of particles, and one major feature of this simulation is the force of charge. Additionally, force simulation also implements pseudo gravity, or more accurately, a weak geometric constraint typically centered on the canvas that can be leveraged to keep your visualization from escaping the canvas. In the following example, you will learn how these two fundamental, sometimes opposing, forces can be leveraged to generate various effects with a particle system.

Getting ready

Open your local copy of the following file in your web browser: ...