Drawing a Network

Learn how to draw a network using nodes and links.

We'll cover the following

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.

Network code 
Explanation


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


    

  • line 5: nodes represents the names of different persons, and links in line 12 represents the links between the different nodes.
    • 

  • Line 24: 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.
    • 

  • Line 20-23:  We have used the forceSimulation API to find a position for each node.
    • 

  • Line 31-37: We have appended the line for each link in the data.
    • 

  • Line 38-44: We have appended the circle for each node in the data.
    • 

  • Line 45-52: 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.