JavaScript: Discover the Graph-Visualization Ecosystem

There are plenty of JavaScript Visualization tools. Based on their functionality, we can cluster them into 4 main categories:

• Charting: to produce the most common DataViz plots;
• Graphs: representing and analyzing graph-based data;
• Maps: for representing data that has geo-features and
• 3D: creating three-dimensional charts and cool animations.

In the previous blog post, we started our JavaScript visualization trip with an overview of the charting libraries. This time we take a look at the tools for plotting graph-based data.

A graph is a special data structure composed of nodes and edges between them. Each graph node is a unique entity in relation to other nodes. This relation is represented with an edge. In mathematics and computer sciences, there is a full graph theory dealing with and analyzing the properties of the graphs. In the figure below, we see one graph example.

Figure 1: Graph example from Cytoscape

The goal of this post is to give an overview of the graph-visualization ecosystem composed of numerous data formats and repositories from one side and plenty of JavaScript low-level libraries as well as out-of-the-box tools on the other side. Stay tuned!

Data Formats

The graphs have a specific structure consisting of nodes and edges between them which requires special structuring of the data used to model and represent them. For this reason, there exist several conventions to store the graph-based data ranging from very simple formats to very complex that can store arbitrary data. These data formats include:

• CSV: the simplest file format storing the information in a delimited text.
• DOT: simple and easily understandable format supported by GraphViz, an open-source tool for graph visualization. More useful information can be found on Wikipedia.
• GDF: a database-like file system that can be easily converted from CSV. It is officially used by GUESS, an exploratory data analysis and visualization tool for graphs and networks.
• GML: the Graph Modelling Language is a hierarchical file format with key-value lists. Its aim is to support flexibility and portability. It is supported by many tools. More information can be found on Wikipedia.
• GraphML: is an XML based file format. This gives the format a lot of expressiveness power and we can define and represent many different graph structures. Many tools have adopted this file format. The full documentation, as well as specification, can be found on the official GraphML website.
• GEXF: abbreviated from Graph Exchange XML format, as its name implies is also an XML format. It was designed by Gephi, an open-source graph visualization platform, with a goal to describe complex and exchangeable network structures. To find out more check the Gephi's GitHub Wiki Page describing the format.

A nice summary of all possible graph file formats can be found on the Gephi's website on Supported Graph Formats page. For convenience reasons we summarize the above-mentioned formats and their properties in the table below:

Data Repositories

In order to facilitate the network and graph-analysis research, there are plenty of data repositories. These data sources contain tones of data in diverse and numerous domains including biology, machine learning, social sciences, physics, etc. Some of the most popular repositories are the following:

• SNAP Collection: hosted by Stanford University, this collection is part of the Stanford Network Analysis Platform (SNAP) which is a C++ graph-mining and network analysis library. More than 100 well-documented data sets, nicely clustered in various areas can be found on the official SNAP website.
• Network Repository: one of the largest repositories for network and graph data in more than 30 domains. All the data is nicely documented and organized on the official web page.
• KONECT: which is an abbreviation of the Koblenz Network Collection is a collaboration whose aim is to collect various types of large network data sets in order to boost the network research. The data repository holds more than 260 well-maintained data sets.
• UCI Network Repository: is maintained by the University of California with the goal to facilitate the research in this domain. The repo contains many different network data sets as well as links to other useful data sources.

Graph Visualization Libraries

The JavaScript Graph Visualization landscape is quite rich and contains dozens of libraries. Some of these libraries are nicely summarized in the top-right corner of the image above. This list is not exhaustive of course, there are many other tools not listed here. In this Medium story, you can find a more comprehensive list. In the following section, we briefly overview the following GraphViz libraries: Cytoscape JS, Sigma JS, Cola, VivaGraph JS, and Springy JS.

All these libraries are open-source and everyone can contribute to their development. Their implementation is hosted on GitHub. For this reason, in the figure below we summarize their GitHub stats as of the date of publishing of this post. These stats might be a good indicator of the development activity and popularity of the library.

Figure 2: GitHub stats for some of the Graph Visualization Open-Source Libraries

It is worth mentioning that all of these libraries allow us to explore the data interactively, which is quite important as we have demonstrated in the blog "The Importance of Interactive Data Visualization":

The human-computer interaction is more immersive and the results are more interpretable.

Cytoscape JS

Initially developed to analyze and visualize biological and molecular interactions and networks, Cytoscape evolved furthermore as a general-purpose graph visualization and network analysis tool. The JavaScript API augments the out-of-the-box tool to create nice graph plots in many interdisciplinary areas as summarized in their gallery of examples.

Sigma JS

Sigma JS is an open-source tool mainly focused on deploying interactive graph visualizations in web applications. It is based on WebGL (or alternatively on Canvas) to render efficiently the graphs in the browser. On the official GitHub repository, we can find many interesting examples as well as proper documentation.

Cola JS

The open-source JavaScript library Cola (which stands for Constrained Layout), or also known as WebCola is not a standalone graph-visualization library. It is rather an implementation of a constraint-based algorithm for drawing graph layouts. This library complements the other libraries with graph visualization capabilities like D3 or Cytoscape.

VivaGraph JS

Among the other alternatives is the VivaGraph JS library which provides a nice API for rendering graphs on the web using many different engines and layouts. The official GitHub repo provides introductory guidelines as well as examples of how to use the library.

Springy JS

Springy JS is another open-source tool designed to be lightweight to use. Thus, it only provides a force-directed layout with simple graph-manipulation capabilities. Same as with many other tools, it is possible to use either WebGL, Canvas or SVG rendering engine.

If you liked what you just read, it would be really helpful to subscribe to the mailing list below. You will not get spammed that's a promise! You will get updates for the newest blog posts and visualizations from time to time.

Summary

In this blog post, we analyzed the Graph Visualization ecosystem. We started with a short introduction to the graph data structure. Then we continued presenting the different data formats to store a graph and where to find such data. Afterward, we briefly overviewed some popular JavaScript open-source graph visualization libraries.

Appendix: GUI-based tools

Aside from the programming interfaces that allow us to explicitly program the graph visualization, there are many out-of-the-box tools. These tools can automatically load data, with support for many different file formats. On top of this, they provide functionalities to manipulate and analyze the graphs in real-time.

In this appendix, we briefly summarize the following two tools: Gephi and GraphVis. You can find a comprehensive list of many of these tools in the following Medium story.

Gephi

Gephi is a free, open-source and multi-platform tool. It was designed and developed to enable real-time rendering and analysis of huge graphs. Thus, it contains a special 3D engine that only uses the GPU and leaves the CPU free. Moreover, it implements a fast and efficient constraint-optimization algorithm called Force Atlas in order to draw the graphs in an aesthetically-pleasing way. Apart from this, Gephi defined and developed the GEXF file format as we described before.

GraphVis

GraphVis is a web-based commercial tool that empowers real-time interactive graph mining and relational machine learning (link prediction, finding influential nodes). Its GUI is very appealing and enables users to interactively query, filter and find patterns in one complex network of nodes and edges.