Four Common Ways to Visualize Graph Data

What is network graph visualization and how can you start to use it today? There are many different ways to display, render, and interact with your graph data. Analysts are using tools from desktop applications like Graphviz, Gephi, and Cytoscape, web-based libraries and visualization platforms like sigma.js and Linkurio.us or data science platforms such as Python and Jupyter notebooks. In this post we look at an example from each of these categories to help you understand the options you have available.

The type of application or tool you use for graph visualization depends on the audience you have in mind. For example, if you need to include an illustration in a journal article you will likely want a higher quality graphical line drawing. If you are delivering a tool for management to explore business relationships an interactive web application may be better suited. Developers will have their favorite tools and each one has some type of graph support.

What is graph data?

The importance of data visualization cannot be understated; spatial and visualization methods of communication can resonate with individuals in a powerful way. Network graph visualization is a subset of data visualization but is also very unique. Most charting software can only draw points and lines on a 2-axis plane. Charts and illustrations communicate trends and differences between populations, but cannot convey the true correspondence between all the elements in a complex system. Since inferring causal relationships between such elements is important for making predictions and decisions, graph visualization has tremendous explanatory value.

In our case we need something that understands entities and their relationships. Put another way, we will have a list of nodes and a list showing how each node connects to another via an edge connection. Any graph visualization tool will be able to read in this kind of structure.

Desktop data visualization tools

There are various open source and proprietary tools in use today. To help you get up and running faster without limits, this section looks mostly at open source product examples. This is not intended to be a list of only the best tools or solutions, but to give a wide range of approaches that might suit your needs.

Graphviz rendering example

Graphviz is a good example of taking simplified graph data and giving you tools to render it into a static image. Their command line tools expect a text format that not only includes the nodes/edges but also style information. An example of the text format and rendered result is shown below in the Graphviz tutorial gallery.

Graphivz.org gallery example showing lineage of the UNIX operating system

The main command is called dot and allows you to script the creation of the rendered image. Programming isn’t really needed, but basic script writers will appreciate the simplicity of its format.

Gephi visualization example

Gephi bundles together graph data management, visualization, and a level of analysis that is quite sophisticated. Some new plugins add analytic capabilities without any coding required. There is a spreadsheet-like UI for adding nodes and edges, or data can be imported. This is limited to small and medium-sized datasets depending on the power of your workstation. You can create a basic quick visualization and select nodes, move them around, set color and line styles, etc. When ready, a more detailed final rendering can be done. This figure shows some of these at play.

Gephi graphical examples of analysis and force-based layout

Fans of Gephi praise its built-in algorithms, e.g., Force Atlas, and the ability to see the data dynamically move to an optimized space. Other plugins can compute values such as Connectedness and other units of complexity.

Cytoscape data integration and analysis

As a desktop-based platform, Cytoscape gives a set of analytic and visualization tools targeting complex network graphs. Built-in use cases are well supported in the field of scientific genetic and biologic datasets. Below is an example screenshot of some of the visualization techniques for a large dataset being rendered by Cytoscape.

The Cytoscape project also has a JavaScript library for viewing their JSON export standard in a web-browser, which leads to our next section.

Programming libraries for data visualization

Java programmers will appreciate the above applications that are built on Java, which is extensible and works on multiple platforms. Likewise, JavaScript programmers have libraries to draw from for graph visualization techniques. Developers dealing with graphical web apps will likely already know how to use D3.js - a swiss army knife of visualization techniques. This is a fairly low-level library but is also very powerful.

Other projects have been built on top of D3 as a common JavaScript visualization library. Sigma.js is dedicated to graph drawing and viewing in a web browser. This screenshot shows an embedded graph example, sample JSON data, and sample HTML showing how it is used.

Sigma.js JavaScript library tutorial example for drawing graphs

Cytoscape also has a format that can be read by their own JavaScript graph library for sharing information easily. It is compatible with Node.js and can render similarly to the desktop application.

Python Jupyter graph visualization

Python has a variety of libraries available as well, but rather than dive into Python-specific examples, we can look at the Jupyter data science platform instead. This may be particularly useful to analysts who need web-accessible tools alongside their big data analytics access.

Jupyter notebooks are being used for a wide range of analytical workflows and for sharing data within an organization. It usually runs on a server and provides a web-based interface for entering code, text, comments, and running them on the server. Graphical results are then also output into the same page when generated.

There are online servers available to experiment with these notebooks without having to create an account or download any software. To try the examples provided, select one of these Python notebook tutorial example files by clicking on an ipynb file and then click the run button to move through the code and show the result.

The below example uses the Cytoscape.js library behind the scenes of a Jupyter widget (ipycytoscape) to display results of graph data from JSON data. There are other examples that show how to access data from a Python Pandas dataframe and more.

Large platforms

The other way to experience interactive graph visualization is by using systems that have it built-in. Most graph analytical databases have a visualization layer or tool available. Neo4j, for example, has a tool called Bloom that allows you to interactively see the results of a query in a visual way.

Other web-first products also include a visualization layer but often much more. Another product, though not open source, Linkurio.us is a good example of what a comprehensive platform would look like.

First, the product connects to different enterprise graph data sources (Azure Cosmos DB, JanusGraph, Neo4j, etc).

Second, their product takes a solid step toward what we at Katana Graph call graph intelligence. It moves beyond letting you simply look for visual cues by providing the tools you need to move nodes and analyze relationships. They provide models and support for particular domains such as cybersecurity and financial analysis, but can be applied more generally as well.

This figure shows different sets of important interactions drawn from about 90,000 nodes and 240,000 edges. Graph intelligence allows a form of summarizing that, ultimately, goes well beyond basic visualization.

Next steps

We hope this quick overview will help you get to the next step of your graph journey. You can now assess your end goal, platform, and delivery mechanism options. If you are still feeling new to the domain, see our earlier Katana Graph blogposts starting with What is a Network Graph Toolkit?