Network Layouts

Force-directed graphs delineated with d3.js force simulations

WITH DIAGRAMS FOR

YIFAN HU & FRUCHTERMAN-REINGOLD

~~~

D3.js disjoint graph — Figure 1: Disjoint force-directed graph made with positioning forces (d3.forceX and d3.forceY), which prevents the disconnected nodes from drifting outside the viewport. Figure Source: Observable @D3.

D3-force simulates physical forces to arrange the nodes and edges on the SVG canvas. For example, it may add spring-like force that pushes and pulls connected nodes while keeping them together, or charge-like force that simulates attraction or repulsion between nodes. The nodes and edges reach an optimal position once these forces stabilize.

~

Yifan Hu Layout

These forces can be used for a number of things. Below is an appromixation of the Yifan Hu Multilevel layout for clustering.

Figure 2: Yifan Hu layout made with repulsive forces (d3.forceManyBody).

Yifan Hu recommends applying repulsive forces on nodes that are not connected to each other, which helps keep clusters spatially distinct. This can be achived by increasing the strength of repulsion on the nodes, using the negative charge strength in d3.js many-body force:


    // Many-body force for Yifan Hu layout
    const manyBody = d3.forceManyBody()
      .strength(-40);

The Yifan Hu layout is great for clustering, and it makes close-knit communities more distinct.

~

Fruchterman-Reingold Layout

These forces can also be useful from a design perspective. In the Yifan Hu layout, nodes spread more naturally based on their connections; however, in Fruchterman-Reingold layout, nodes are actively pulled toward an (x, y) center point, which creates a compact, centered appearance.

Figure 3: Fruchterman-Reingold layout made with positioning forces (d3.forceX and d3.forceY).

In my experience, there is not much difference between the set of forces used in Yifan Hu and Fruchterman-Reingold layouts, except for the position forces in Fruchterman-Reingold, which are used to push nodes to a specific center point—such as the middle of the SVG canvas.


    // Position forces for Fruchterman-Reingold layout
    const x = d3.forceX(width / 2)
      .strength(0.4);

    const y = d3.forceY(height / 2)
      .strength(0.4);

The difference between Yifan Hu and Fruchterman-Reingold layouts is that the former creates negative space to give shape to the communities while the latter closes this space to distribute the nodes evenly across the SVG canvas, which helps reduce overlapping labels.