How I Built an App for Creating Interactive LinkedIn Network Graphs

Using Networkx, Plotly, Pyvis, and Streamlit sharing to create and share network graphs from LinkedIn connections data

Network graph by author

tl:dr — if you want to go directly to the app and make your own LinkedIn connection graphs, click here: https://share.streamlit.io/jschoonmaker/linkedin_network/main/li.py

Network Graphs

In my work as a data scientist, I primarily work with data that is in tabular format, meaning it is stored in rows and columns and generally part of a relational database system. Even when working with images or text, the eventual goal is often to put the metadata into a table for further analysis. Most data science tutorials emphasize pandas for good reason — it’s a tool data scientists use often for working with tabular data.

However, I was interested in learning more about network graphs and how they represent the relationship between entities in the graph by using nodes and edges.

Example of nodes and edges in a network graph, from Math Insight http://mathinsight.org/network_introduction

I also wanted to learn more about how to create these graphs and customize them according to their features. Since concepts like nodes and edges were a little fuzzy for me, I started with a simple network that was intuitive to work with — my LinkedIn connections.

I found a great tutorial online from

Benedict Neo

and another from

Bradley Schoeneweis

that clearly explained how to download a csv of my LinkedIn connections, how to clean and filter that data, and how to use it to create a network graph. After testing out the tutorials on my own data, I decided to build a streamlit app that could help others learn about and visualize their connections as network graphs as well.

Streamlit Features

Streamlit is an open-source app framework that allows for quick and easy app development and, with the streamlit sharing option, app deployment. (see more from streamlit at https://medium.com/streamlit)

My goal for my streamlit app was to make it possible for anyone to create their own network graphs and to include multiple streamlit features such as:

1. An expander option so instructions could be shared but then minimized, keeping the look of the app clean
2. A sidebar for customizing the graphs
3. A screencast video showing users how to navigate the app
4. An option to download the graphs the app created

The links in each of the steps above will give you instructions on how to implement the features in your own streamlit app, or you can look at the github of this project to see them in action: https://github.com/jschoonmaker/linkedin_network/blob/main/li.py

My app takes a LinkedIn connections csv file as an input and returns:

1. Customizable Plotly bar graphs showing the top connections by company and by title, along with the dates most connections were made on LinkedIn
2. Customizable Pyvis Networkx graphs showing weighted nodes and annotated hover text that provides more detailed data

Let’s dig in to how to add this functionality to a streamlit app.

Plotly Bar Graphs

When the streamlit app first launches, it needs a csv file of LinkedIn connections to be uploaded before any graphs can be created. Originally, before a csv file was uploaded, an error would show on the app saying the df referenced in the code didn’t exist.

In order to both have a cleaner look and to avoid the streamlit program trying to run before the user had uploaded a file, I added this to the code:

Streamlit loads plotly graphs easily, so that feature worked by simply adding an st.write() wrapper around the plotly graph code, but I also wanted to add the option of changing the color scheme of the plotly graphs.

This code creates a drop down menu in the sidebar that lets the user choose a color theme. That color theme is then returned in a function, and that function is called as part of the bar graph parameters:

Pyvis Networkx Graphs

For the network graphs, I used a similar approach for the color options, but also added a slider that applied the minimum number of connections that needed to exist for that company or job title to be included in the network graph. This ensured that enough connections are returned to show a good graph, but that the graph won’t be overpowered by including every connection.

In order to include this option, I created a slider in the sidebar with numbers from 1 to 20 and a default option of 3, then I used the variable option assigned to the user output of the slider as the filter for the dataframe the network graph was built from:

count_option = st.sidebar.slider('Choose the minimum number of connections at company for them to be included:', 1, 20, 3)
df_company_reduced = df_company.loc[df_company['count']>=count_option]

Next, the edges and nodes needed to be added to the graph by iterating through the dataframe created from the connections csv. The count of connections determines the size of the node, as well as the color. The title of each node is collected from the list of positions and count associated with each company:

Finally, it’s time to create the network graph visualization. I originally tried to use plotly to build the network graphs so that all graphs in the app referenced the same color scheme, but ultimately I found it too difficult to get plotly working with all of the networkx features. If you have any expertise in this area and want to share, please add links to suggested resources in the comments! Since I couldn’t get plotly working with the network graphs, I used pyvis instead.

Pyvis takes the collected Networkx graph data, applies any size and color specifications along with either the ‘repulsion’ or ‘hrepulsion’ option based on whether the user chose a ‘packed’ or ‘spoke’ graph, then creates the graph as an interactive html object that can be moved and manipulated by dragging a node to another part of the graph.

In order to display the html object that Pyvis returns in streamlit, components.html can be used:

Finally, by uploading all of the project code into its own github directory and following these directions, the streamlit app can be deployed and anyone who clicks on the link will be able to access and use your app.

And that’s it! This was a great project to not only learn more about network graphs and the python modules that can be used to create and visualize them, but also a good opportunity to learn more about the options for building, deploying, and sharing a streamlit app.

Click here to see my streamlit app in action: https://share.streamlit.io/jschoonmaker/linkedin_network/main/li.py

or click here to see the github repo where all the code is stored: https://github.com/JSchoonmaker/LinkedIn_Network

Happy building!