Exploring Network Graph Visualization: Graphology and Sigma.js

#webdev #javascript #typescript #beginners

Graphology and Sigma.js are great libraries for those who want to learn to create interactive network graphs with JavaScript and Typescript.
Both projects are easy to install, and feature comprehensive, interdependent libraries for data modeling and graph visualizations. While Graphology handles what a graph will do, Sigma.js is responsible for the how the graph is experienced online.

Graphology

Graphology holds a reference implementation as well as a Graph object itself. A reference implementation combines all of the standardized requirements and common practices into one program. Examples of some of those requirements include graph layouts, metrics and algorithms that focus on community detection.

Important to the concept of a reference implementation, is testing, which is also included. Testing also provides you with some valuable training wheels while learning.

In tandem with its customized graph data structure, Graphology supplies properties and methods created by both the developers and contributors.

Here's an example of creating a new instance of the program's Graph object and some added properties, attributes and methods:

let graph = new Graph();

// a method to add nodes 
graph.addNode('Trantor');

// a setter attribute for that node
graph.setNodeAttribute('Hari Seldon', {school: "Streeling University"});

// a property that tells you the type of graph 
graph.type;

One of the more intuitive features is the auto-generation of node keys: nodes require keys to help the graph recognize and store any optional information you may pass to it. By auto generating keys while you create nodes, you have the option to add more information later whenever you're ready to do so.

Leading into sigma.js, graphology includes event handler methods for interacting with users once your network graph is rendered.

Sigma.js

As mentioned earlier, Sigma.js handles how a graph is experienced; in other words, it manages the rendering process and any graphical user interactions on your website.

Here are a few highlights:

uses the popular JavaScript graphics API, WebGL
renders medium to large graphs
utilizes a plug-ins library for help with customization
it's open-sourced!
provides intuitive documentation and ample demos

In their interdependence, Graphology and Sigma.js provide great functionality for visualizing and interacting with network graphs capable of holding thousands of connections. They also do a good job at providing guidelines for those interested in diving into the realm of network data analysis. Hopefully this article has given you insight on some of the exciting graph tech available to you.

Thanks for reading!