D3.js force layout

Debugging the ALPHA!

d3 force layout_1

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.

Screen Shot 2017-11-17 at 15.38.35
Lightbeam graph using d3-force layout


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 😉



One thought on “D3.js force layout

Add yours

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

Blog at WordPress.com.

Up ↑

%d bloggers like this: