Debugging the ALPHA! While I have worked with D3.js in the past, the d3-force layout library was entirely new to me and it was very interesting to learn the concepts behind the physical simulations in order to understand the networks and hierarchies of the first and the third party trackers for Lightbeam. It did take enormous blood and sweat to understand this force layout in depth, but the end result is what I am super proud of today.

Simulating physical forces

The d3-force layout module implements a velocity Verlet numerical integrator for simulating physical forces on particles. Verlet integration is a numerical method used to integrate Newton’s equations of motion. In mathematical physics, equations of motion are equations that describe the behaviour of a physical system in terms of its motion as a function of time.

The d3-force layout module

In simple words, this module creates a simulation for an array of nodes and links, and composes the desired forces. As the nodes and links update, they are rendered in our preferred graphics systen, Canvas or SVG, by listening for tick events.

After initialising the simulation through `d3.forceSimulations(nodes)` and registering the links force, it took lot of trial and errors to register the right amount of other forces and achieve the correct simulation.

`simulation.tick()`

This is part of the d3-force layout and this was the trickiest of all!

I might have read the below lines a dozen times in d3-force layout documentation, but I was never able to figure out how alpha truly worked. As I am writing this post, I am very happy that I finally understand how this alpha works.

The tick function increments the current alpha by (alphaTargetalpha) × alphaDecay; then invokes each registered force, passing the new alpha; then decrements each node’s velocity by velocity × velocityDecay; lastly increments each node’s position by velocity.

This sounds very simple as I write. After all, what is the big deal with this alpha? 🙂 But as stated earlier, I didn’t know the true importance of alpha, and as a result, I didn’t know how to stablise the graph.

May the ALPHA rest in peace 😉