Network Graphs: Creating Interactive Visualizations using Pyvis

Post Views: 1,426

Hey there fellow Python coder! In this tutorial, we will be learning about what Network Graphs are and also learn how to draw the same on your screen using the Pyviz module in Python programming language.

I am very excited to share what I have in store for you. Let’s dive right in!

Introduction to Network Graphs

Let’s imagine you have a group of friends, and you want to see who’s friends with whom. Consider each friend as a small circle, and when two friends are friends with each other, you draw a line between them to represent the connection they have together. After you have made all the friendly links we end up with a combination of circles and lines which is what we call ‘Network Graph’. To make you understand better, have a look at the sample network graph below for a group of friends.

Let’s learn what are the actual terms for these circles and lines in a network graph. The circles are called ‘Nodes’ while the lines are called ‘Edges’. Pretty simple right?

So let’s frame it all together in one definition: A network graph is a visual representation of connections between different entities, where the entities are represented as nodes (circles) and the connections between them are represented as edges (lines).

Introduction to Pyvis Module

Now that you have understood what Network Graphs are, let’s also gain a general understanding of the module that we will be using to implement the same in Python.

The module that we will be using is the Pyvis module. Pyvis is like a tool that helps you create simple interactive Network Graphs. It makes it easy to draw these nodes and edges simply.

Before the implementation begins, you need to install the Pyvis library. You can do this using the following pip command in your terminal or command prompt: pip install pyvis.

Implementation of Network Graphs using Pyvis Module

You are aware of what Network Graphs are and are also aware of the tool that we will be using to draw the same on the screen in Python programming language. We will start by creating a simple Network graph using the pyvis module.

Creating Simple Network Graphs

Let’s start by creating the same network graph that we saw in the illustration image we saw above. It would be fun if we were able to relate things together better.

We will start by importing the necessary modules and submodules using the code line below:

from pyvis.network import Network

We will be importing the sub-module called Network to work with networks. Next, we will create a blank Network using the Network() function and then add some nodes to the network using the add_node function.

The add_node() function takes two parameters: the first one is a “unique ID” to locate the node and the second one is the “label” or let’s say the name attached to the node.

Have a look at the code below:

friends_Network = Network()

friends_Network.add_node(1, label='SANNA')
friends_Network.add_node(2, label='FARAH')
friends_Network.add_node(3, label='JAKE')
friends_Network.add_node(4, label='NIKKI')
friends_Network.add_node(5, label='GARY')

Here we have added five different Nodes about the image we mentioned above. Now let’s add all the edges required to represent who is friends with whom.

We achieve the bonding using the add_edge function which takes two different parameters which are namely the source and the destination. The two connecting nodes IDs.

Let’s add the edges (lines) based on the image we mentioned above. Here’s the code to do that:

friends_Network.add_edge(1,5)
friends_Network.add_edge(3,2)
friends_Network.add_edge(5,4)
friends_Network.add_edge(3,5)

I bet you wish to jump to the interesting part which is having a look at the visualization. To achieve the same we will be using the function called write_html() which will take only one parameter which is the name of the file.

Let’s have a look at the code:

friends_Network.write_html('Simple_Network.html')

After you execute the code above, you will find a new file called Simple_Network.html in the same folder as your code file. When we open the HTML file, the final result looks somewhat like what’s shown below:

As you can see in the video. You can interact and have fun playing around with nodes and visualizing the complete network in a much better way. But there is still something missing, there are no colors or styling and the graph seems very boring in general. Let’s change that in the next section!

Customizing The Nodes of Simple Network Graphs

Pyvis module comes with a variety of options to make the simple network graphs visually more appealing. Let’s first of all customize the nodes in this section.

Adding Colors to the Nodes

The only difference when we need to add colors to the nodes is to add a parameter called color the add_node function which I mentioned before. Have a look at the code snippet below.

from pyvis.network import Network

friends_Network = Network()

friends_Network.add_node(1, label='SANNA', color = 'Magenta')
friends_Network.add_node(2, label='FARAH', color = 'Cyan')
friends_Network.add_node(3, label='JAKE', color = 'Green')
friends_Network.add_node(4, label='NIKKI', color = 'Pink')
friends_Network.add_node(5, label='GARY', color = 'Orange')


friends_Network.add_edge(1,5)
friends_Network.add_edge(3,2)
friends_Network.add_edge(5,4)
friends_Network.add_edge(3,5)

# Save the graph as an HTML file
friends_Network.write_html('Simple_Network.html')

As you can see I have added a parameter called color to the add_node function with the value set to different colors. The result looks like the one shown below:

Changing Shapes and Sizes of the Nodes – Pyvis

Next, we will move on to changing the shapes and sizes of the nodes present in the graph. Similar to color, to achieve this we will be adding the parameters called shape and size respectively. Have a look at the code and output below:

from pyvis.network import Network
friends_Network = Network()

friends_Network.add_node(1, label='SANNA', color='Magenta', shape='square', size=10)
friends_Network.add_node(2, label='FARAH', color='Cyan', shape='ellipse', size=20)
friends_Network.add_node(3, label='JAKE', color='Green', shape='star', size=50)
friends_Network.add_node(4, label='NIKKI', color='Pink', shape='triangle', size=30)
friends_Network.add_node(5, label='GARY', color='Orange', shape='ellipse', size=40)

friends_Network.add_edge(1, 5)
friends_Network.add_edge(3, 2)
friends_Network.add_edge(5, 4)
friends_Network.add_edge(3, 5)

friends_Network.write_html('sample.html')

As you see how interesting the network graph looks in the video. Hope you have liked the tutorial up till now.

Customizing The Edges of Simple Network Graphs

Now that we are done with customizing the nodes, let’s move on to working on customizing the edges of the simple networks in this section.

Adding Weight to the Edges

Well, we have been talking about the bond between friends and even creating graphs to create friendships. But we all know that when relations are in the picture, some bonds are always stronger than the rest of the bond. Similarly, there must be some way to represent the level of friendship two people have. The correct term for the same is weight of the Edge.

We can achieve it using the weight parameter inside the add_edge function just like it is done using the code below. But the weight value is not visible in the form of width of edges by default, to make the weight values visible let’s use the parameter called label.

from pyvis.network import Network
friends_Network = Network()

friends_Network.add_node(1, label='SANNA', color='Magenta', shape='square', size=10)
friends_Network.add_node(2, label='FARAH', color='Cyan', shape='ellipse', size=20)
friends_Network.add_node(3, label='JAKE', color='Green', shape='star', size=50)
friends_Network.add_node(4, label='NIKKI', color='Pink', shape='triangle', size=30)
friends_Network.add_node(5, label='GARY', color='Orange', shape='ellipse', size=40)

friends_Network.add_edge(1, 5, weight = 10, label = '10')
friends_Network.add_edge(3, 2, weight = 20, label = '20')
friends_Network.add_edge(5, 4, weight = 5, label = '5')
friends_Network.add_edge(3, 5, weight = 50, label = '50')

friends_Network.write_html('sample.html')

The output looks like this.

Conclusion

In this tutorial, we’ve covered the basics of creating and customizing network graphs using Pyvis in Python. You can experiment with different scenarios and create better and more informative network graphs.

That’s all for now, you have reached the end of this tutorial. If you liked this tutorial, check out the following blogs as well: