Repost from Medium

We are living in a highly connected world. People, companies, countries are all connected to each other through a billion means. Collectively; these interactions form up networks of various complexity. Due to its direct relation with success, understanding and optimizing networks take up a great portion of efforts in every company.

To make sure every operation is optimized, you would first have to dissect and analyze systems. Seeing relationships through mountains of data can be intimidating at first. However, presenting such data in a visual format can help identify new trends by providing several perspectives and highlighting the outliers. There are several different ways to visualize networks, but no other method has the tin heart of the force layout diagram; it’s a living environment.

Force layout is a node placement diagram and it represents a network consisting of various forces. After a few iterations, these forces reach a mechanical equilibrium, and produce the final diagram. These diagrams often look aesthetically pleasing, can easily show symmetries and work great with a huge variety of data. Moreover, it’s simple looking and allows for interactivity.

You can move the nodes however you want; force layout allows for limitless possibilities for structuring. While it might look pleasing with small data too, force layout truly shines with medium size datasets (about 50–500 objects).

A medium size dataset on Force Layout in Tree mode

The reason this diagram is actually an “algorithm” is because the nodes follow Coulomb’s law and the arcs Hooke’s law! These forces are applied in conjunction and they eventually stabilize the network.

The main challenge with this visualization is the layout. As the number of nodes increase, you risk creating local congestions and these diagrams tend to get complicated pretty fast. To avoid overlapping and customize it however you want, you can change the properties of these forces. In order to keep things simple, we placed all these properties on a new tab called “Options”. You can play around with the sliders to determine node properties and arc lengths.

“Options” tab in Force Layout Diagram

The first parameter, radius, will compute the data so that the node with the lowest value will have the minimum radius and vice versa. Mix and match with link distance to get the best results!

You can think of the gravity, as springs between the nodes. A force layout with higher gravity will pull the nodes tight, whereas a lower gravity will make them look like gas molecules on the loose.

Positive charge means the nodes will repel each other, whereas negativecharge will do the opposite. There really is no reason to go crazy on this, because high charges tend to give funny results. Mike Bostock’s collision detection is a very popular example for force layout diagrams and you can imagine the nodes as negatively charged (nodes are repelled).

Lastly, link distance determines the arc length in tree and relational modes. This, of course, needs to be optimized to prevent nodes from overlapping, but still keeping them together. Not sure what to do? Simply leave all sliders at “Auto”.

Force layout almost looks like a living, evolving organism. When you play around, you see forces showing reactions to your actions and the visualization unfolds before you.

Visualizing networks interactively lets users rearrange the layout, filter the data and find just what they need. And as a bonus, it looks pretty lively.

Force layout comes in three different forms:

Three modes of Force Layout Diagram


With the arcs connecting the nodes, the tree mode gives a shape similar to a circle dendrogram. For example, this is the perfect choice for creating an organization network for the HR department. This mode requires two types of inputs; sources and measure. Sources, selected in order, determine how the layers will be formed. In tree mode, colors only signify the hierarchy levels.

Below is a force layout in tree mode, showing the distribution of bonuses within the company. Here, sources would be departments and their subgroups, whereas the measure is the bonuses. With a glance, you can have an idea how individual performances are rewarded. Outliers are obvious; managers with larger teams get more bonuses.

Force Layout in Tree mode


A force layout in clustered mode will give you a bunch of circles in different size and color. An additional input here, cluster, paints the nodes depending on their groups. Finally, the circles take a size depending on the corresponding magnitudes and it will end up with a beautiful set of circles hugging each other.

Here is a clustered force layout, visualizing the operating budget of the City of Boston for the year 2014. The color coding represents the departments, the nodes are individual programs and the circles are total budget. Looking big clusters, we see that the city is spending most of its money on public utilities (darkest blue) and parks and recreation funds (darker blue). The biggest circle on the right is “General Expenses” and this makes up the biggest portion of public utilities spending. Parks and recreation, on the other hand, consists of several smaller expense categories.

Force Layout in Cluster mode


Force layout can also be used to demonstrate the interconnectivity of objects in a dataset. In relational mode, arcs represent a flow or a relationship. In addition to a source and measure, this mode also requires target and relationdata. Source is the point A and the target is point B. Relation acts as a second grouping mechanism and colors the nodes accordingly. Relationships between characters, process flows and any other type of data that doesn’t strictly have a hierarchical structure are among common uses for this mode.

The constellation below is a visual representation of the communication network within an organization. People are shown on nodes and those who are in contact with each other are connected with arcs. Just by looking at it for a few seconds, you can tell where lack of communication might be a problem and take necessary precautions. For instance, most people are connected either to Kate or Peter. Two managers are in contact with their departments and each other. On the other hand; Alex seems to be only in contact with his boss, Kate, and therefore, might be an outside contractor.

Looking at the big picture, we see that people in Peter’s department seem a bit more connected; in his group, more combinations are tied with arcs. These two patterns show signs of different management styles. Even though she has more people reporting to her, Kate follows a more centralized method. Her department report mostly only to her, while Peter’s group work in a more collaborative environment. Alternatively, you can also make this visualization in a way that the number of messages are shown with the arcs. This way, the traffic can also be factored in.

Force Layout in Relational mode

Data-driven networks are a huge part of our life; social interactions, logistics operations or budgeting are just a few examples. Visualizing these networks can reveal a lot more than you can see and help you discern important bits easily.

Due to its dynamic structure and flexibility, force layout is a popular choice among data scientists for visualizing complex networks. There’s been extensive research on these algorithms and new variants are introduced regularly. Its layout allows displaying tons of objects at the same time, while its versatility and modes create countless possibilities for its use. Force layout is a modern and interactive visualization that can help everyone make informed decisions in no time.