Unlock the Power of Streamlit, NetworkX, and Plotly for Something Fun
Network graphs (also called network diagrams) are a special type of visualization that shows the connections between a set of entities via nodes and edges. Each entity in the network graph is called a ‘node’ and the line connecting a pair of nodes is called an ‘edge’. An entity can be a person, an event, a sports team, or anything else. Network graphs are an effective way to visualize and analyze the relationships between entities within a network.
A network graph can be directed or undirected. The size and color of the nodes and the width of the edges can be used to show different attributes of the network entities and their relationships. Below is an example of a simple undirected network graph with the node colors representing the number of connections each node in the network.
In this post, I want to show you how to build a simple app that generates interactive network graphs (like the one shown above) using
Plotly. The app allows users to upload a CSV file with their network data following certain formats — only two columns are required: one for source nodes and the other one for target nodes.
After users upload the data into the app, the app will generate an undirected network graph instantly with the color of the nodes representing the number of connections each node has in the network. Users can also choose different layout options for the graph or different color schemes for the nodes. Here is a short video demo of the app.
If you are new to Streamlit, please read the following article and follow the instructions to install Streamlit and learn its basics.
You will also need to install the following packages:
pip install plotly
pip install networkx
Great! Now you have installed all the required python packages, let’s start building the app. First, let’s import all the necessary libraries and add a few widgets to the sidebar and a title to the main interface:
- We will add a logo (optional)
- We will add a collapsible expander widget (‘About the App’)
- We will add a file uploader that allows users to upload a CSV file to the app
- We will add an app title to the main interface of the app with CSS styling
Next, let’s use
Plotly to create the network graph based on the data uploaded by the user. Here I created a sample network dataset showing a group of people’s LinkedIn connections. The CSV file has only two columns — the ‘source’ column has all the source nodes and the ‘target’ column has all the target nodes. Each row represents a pair of connected nodes (‘edges’). This is all you need for the input data.
Once the user uploads the CSV file to the app, we’ll use
NetworkX to create a network graph. We will also add three input widgets to allow users to choose a certain layout of the graph, specify their preferred color scheme, and add a title to the graph.
Finally, let’s use
Plotly to visualize the network graph created using
NetworkX. Make sure you add the code below within the
if uploaded_file is not None: statement with correct indention.
There you go! We have successfully built a simple interactive network graph app using
Plotly! There are certainly more enhancements you can make to the app. For example, we can add more widgets to allow users to specify the size of the nodes or the width of the edges to convey more information about the network as well as the nodes’ and edges’ attributes. It will need a bit more coding on the
plotly part but it’s certainly doable and I encourage you to give it a try yourself. Thanks for reading and I hope you enjoyed this tutorial!
Data Source: The sample dataset used in this tutorial was created by the author for demonstration purposes.
Reference: Network Graphs in Python from Plotly’s Documentation
You can unlock full access to my writing and the rest of Medium by signing up for Medium membership ($5 per month) through this referral link. By signing up through this link, I will receive a portion of your membership fee at no additional cost to you. Thank you!