Python Interactive Network Visualization Using NetworkX, Plotly, and Dash | by Jiahui Wang | Towards Data Science

They say a graph is more than a thousand words. I totally agree with it. I would prefer to look at a network graph, rather than reading through lengthy documents, to understand a complicated network pattern.
This post is about a Python interactive network visualization application. In the first half, it covers the network visualization application features and a introduction of the tools I used for developing this application. In the second half, technical details on how to use NetworkX, Plotly, and Dash are discussed.
A network graph reveals patterns and helps to detect anomalies. There is huge potential for network visualization applications in finance, and examples include fraud surveillance and money laundry monitoring. For this project, I will create a dummy dataset of transactions, and build a network visualization application to interactively plot graphs showing these transactions.
Firstly, this application will read in the dummy transaction dataset, and generate graphical representation of the transaction network. Here, I want to customize the graphical representation, such as the edges are color-coded according to transaction time, and the edge width are varied according to transaction amount. In this way, it is easy to quickly understand the transaction network graph.
Secondly, it will be an interactive application. When the user hovers on a node or edge, rich information will show. In addition, the user should be able to type in the account to search and the time range to show. Then, in response to the user’s input, the application will show transaction network graph accordingly.
I find several useful python packages to enable the development of this application, including NetworkX, Plotly, and Dash. This session will cover a brief introduction of these libraries, as well as discuss about how they are useful for the development of this application.
2.1 Graph Theory and NetworkX
To represent a transaction network, a graph consists of nodes and edges. Here, the nodes represent accounts, and the associated attributes include customer name and account type. The edges are transactions with associated attributes of transaction date and transaction amount. The transaction network is a directed graph, with each edge pointing from the source account to the target account.
NetworkX is a Python package for the creation, manipulation, and study of the structure, dynamics, and functions of complex networks. It allows quick building and visualization of a graph with just a few lines of codes:
import networkx as nximport matplotlib.pyplot as pltG = nx.Graph()G.add_edge(1,2)G.add_edge(1,3)nx.draw(G, with_labels=True)plt.show()
Apart from building a simple graph with the inline data, NetworkX also supports more complicated graph with dataset imported from csv or database. Here, I import the dummy csv files containing the transaction records, and built transaction network using NetworkX.
2.2 Interactive Figure and Plotly
Python comes with several useful plotting libraries. Unlike the static Matplotlib and Seaborn libraries, Plotly makes interactive graphs. It supports many common chart types, including line plots, scatter plots, bar charts, histograms and heatmaps. Together with ipywidgets, it allows interactive data analysis in Jupyter notebook.
2.3 Reactive Web Applications and Dash
Jupyter notebook is popular among data scientists. But I want to move one step further, to make the application accessible to other stackholders, who may not neccessarily have the background of data analytics. Web application becomes a good choice, as everyone can easily access the web applications using just the browser.
Then, I find Dash, which is a open source Python library for creating reactive web applications. Dash allows seamless integration of Python data analysis code with front-end HTML, CSS, and Javascript. With the Python interface and reactive decorators provided by Dash, the Python data analysis code is binded to the interactive web-based components. Since Dash is built on Flask framework and React.js for frontend rendering, I can easily access massive support from the open source community. Last but not least, Dash is fully compatible with Plotly, which means I can integrate the network graph created with Plotly as a component in the Dash application and further add other web-based components to interact with my data analysis code.
Now, let’s move on to the real coding!
3.1 Initialize The Dash App
Since Dash is built on Flask framework, it is not surprising to see almost the same syntax to start a Dash application as to start a Flask application.
3.2 Define The Layout
With the Python interface dash_html_components and dash_core_components, HTML and interactive web-based components are easily integrated to the Python analysis code. Here, the layout design follows Bootstrap grid system. This transaction network visualization app includes components of RangeSlider (to define time range), Input box (to type in the account to search), Plotly graph (to show the transaction network according to the user input), Hover box (to display the detailed information when the user hover on the graph), and Click box(to display the detailed information when the user click on the graph).
3.3 Bind to The Analysis Code
When the user makes changes to the RangeSlider or the Input box, the Plotly figure will change accordingly. When the user hovers or clicks on the node or edge in the Plotly figure, the Hover box and the Click box display the detailed information associated with the node or edge.
3.4 Define The Plotly Graph
Here, the code defines how to build the transaction network, initiate the Plotly graph, as well as how to change the Plotly graph in response to the user’s input. Basically, the code here define the logic of the network graph.
Firstly, import the dataset and transform date string to Datetime object which Python understands.
Then, build the network using NetworkX.
Define node with Plotly.
Define edge with Plotly. Here, to define the customized edge is not as straight-forward as defining the node. The edges are customized in two ways: the color of the edge represents the time of the transaction, the early the transaction, the lighter the edge color; In addition, the width of the edge represents transaction amount, where wider edges have larger transaction amount.
Define the invisible middle point on the edge, to allow hover effect on the edge. Since Dash only allows hover effect on data points, I add an invisible middle point on the edge to create an additional data point on the edge.
Finally, define the layout of the Plotly graph.
The final transaction network visualization app works like:
If you are interested in the code, please check it out on Github.