What is a Force Layout Diagram in d3.js?

The following post is a portion of the D3 Tips and Tricks document which is free to download. To use this post in context, consider it with the others in the blog or just download the pdf  and / or the examples from the downloads page:-)

-------------------------------------------------------

A Force Layout Diagram is not a distinct type of diagram per se. Instead, it's a way of representing data so that it individual data points share relationships to other data points via forces. Those forces can then act in different ways to provide a natural structure to the data. The end result can be a wide variety of representations of connectedness and groupings.

Mike Bostock gave a great talk which focused on force layout techniques in 2011 at Trulia for the Data Visualization meetup group. Check video of the presentation here and the slides here. The most memorable quote I recall from the talk describes force layout diagrams as an “Implicit way to do position encoding”.

Here's some examples for those who need a reason to view the talk.

Multi-Foci Force Layout

Simultaneous forces of repulsion and multiple gravitational focus points creates a natural clustering of data points (Source: Mike Bostock (http://bl.ocks.org/mbostock/1249681). The graph is animated, so the artifacts such as overlapping circles and the purple circle that is located beside the red area are transitory.

  Force Directed Graph with Pan / Zoom

Multiple linked nodes show connections between related entities where those entities are labelled and encoded with relevant information. Created by David Graus and presented here.

Collapsible Force Layout

This force directed graph can have individual nodes expanded or collapsed by clicking on them to reveal or hide greater detail (Source: Mike Bostock (http://bl.ocks.org/mbostock/1062288).

Force Directed Graph showing Directionality

 This example showing mobile patent lawsuits between companies presents the direction associated with the links and encodes the links to show different types (Source: Mike Bostock (http://bl.ocks.org/mbostock/1153292).

Collision Detection

 In this example the mouse exerts a repulsive force on the objects as it moves on the screen (Source: Mike Bostock (http://bl.ocks.org/mbostock/3231298).

Molecule Diagram

Just for fun, here is a diagram the Mike Bostock made to demonstrate drawing two parallel lines between nodes. He's the first to admit that increasing the number of lines becomes awkward, but it serves as another example of the flexibility of force diagrams in D3  (Source: Mike Bostock (http://bl.ocks.org/mbostock/3037015).

The main forces in play in these diagrams are charge, gravity and friction. More detailed information on these forces and the other parameters associated with the force layout code can be found in the D3 Wiki.

Charge

Charge is a force that a node can exhibit where it can either attract (positive values) or repel (negative values) . Varying this value in conjunction with other forces (such as gravity) or a link (on a node by node basis) is generally necessary to maintain stability.

Gravity

The gravity force isn't actually a true representation of gravitational attraction (this can be more closely approximated using positive values of charge). Instead it approximates the action of a spring connected to a node. This has a more pleasant visual effect when the affected node is closer to it's 'great attractor' and avoids what would otherwise be a small black hole type effect.

Friction

The frictional force is one designed to act on the movement of a node to reduce it's speed over time. It isn't implemented as true friction (in the physical sense) and should be thought of as a 'velocity decay' in the truer sense.

Mike makes the point in the 2011 talk at Trulia that when using gravity in a force layout diagram, it is useful to include a degree of charge repulsion to provide stability. This can be demonstrated by experimenting with varying values of the charges in a diagram and observing the effects.

The above description (and heaps of other stuff) is in the D3 Tips and Tricks book that can be accessed from the downloads page of d3noob.org (Hey! IYou can get it for free. Why not?)