Drawing a Network

In the previous lesson, we have used the forceSimulation() API to compute the position for each node in the network. Now it’s time to draw the network using the knowledge of the forceSimulation() API.

Network visualization

Let’s demonstrate the network using the following example where we have dummy data that contains different people who have links with each other.

Let’s write code to draw a network to show their relationship.

Explanation

Let’s dive into the explanation of the above code to better understand how it works.

• Line 6: nodes represents the names of different persons, and links in line 13 represents the links between the different nodes.
• Line 25: We have used on('tick', ticked) which is used to get the state of the layout when it has changed (the simulation has advanced by a tick) and act on it.
• Lines 21-24: We have used the forceSimulation API to find a position for each node.
• Lines 32-38: We have appended the line for each link in the data.
• Lines 39-45: We have appended the circle for each node in the data.
• Lines 46-53: We have initialized the position of nodes and links based on the data.

Note: The names of nodes are not visible in the above example. Don’t worry. We will implement this functionality in the upcoming tooltip lesson.