Graph Visualization Tools and Best Practices - XenonStack

What is Graph Visualization?

In Network Visualization, a network dataset structure contains interconnected entities. When networks visualized, the entities are called nodes, and the connections are called links. Graph visualization is the visual representation of the nodes and edges of a graph. Any dataset that contains information about connections can be modeled and visualized as a graph, sometimes data initially stored in a tabular way.

Graph visualization is a better way to understand and manipulate connected data. Tabular data shows the nodes or edges in isolation, but it is difficult to understand the dynamics and connections within the data. Networks see how entities in data are connected, adding new information to understand visualizations. Add the links in the node-link diagrams. Apply a layout to the network to disentangle the connections and show structure. Algorithms (forceAtlas2 Based, physics), called layouts, calculate the node positions and display the data on two-dimensional spaces. This way of representing data required for scenarios which involve connections. Example: Social Networks, Telecommunication Networks, and Relationship Diagrams.Social network graphs are a network of nodes and edges — of entities and the connections between them.

Why Visualization Matters?

Network diagrams used in the data visualization to visualize how things relate to the other.

  • Fast Decision – Making – Recognize visual patterns in the dataset, network visualizations gives faster decisions and efficient processes, takes right actions soon.
  • Provide more Intelligence – Graph visualizations helps to understand the dynamics in the data from node by node and network by network.
  • Data accessibility – Mostly graph visualizations are interactive and customizable. It makes them impactful, intuitive and helps to put data analysis in the hands of all users.
  • Improve reporting processes – It makes reporting simple and more effective by sharing visualizations as .PNG files and interactive charts.

Who needs to Visualize Networks?

  • Security and Intelligence
  • Social Networks
  • Cyber-Security
  • IT infrastructure

How Graph Visualization Works?

Little more complex graph include arrows, add labels to edges, and change foreground and background colors and shapes. Customizable nodes and edges made in Vis.js by using nodes and edges property.

/* var options = {
nodes: {
borderWidth: 4,
                       size: 30,
color: {
border: '#22222',
background: '#666666'
font: {
color: 'green'
edges: {
color: 'red'


Add physics configuration. Need physics configuration to deal with large sized networks, handles the HTML part of the canvas, interconnectivity with the Network Graph either high or low, because of which physics and network configuration settings needs to be done.

gravitationalConstant: -26,
centralGravity: 0.0050,
springConstant: 0.18,
springLength: 30,
avoidOverlap: 0
maxVelocity: 146,
solver: 'forceAtlas2Based',
timestep: 0.35,
stabilization: {interactions: 150}

Loading External JSON datafile into Vis.js network

var json = $.getJSON('visimages.json')
var data={
nodes: data.nodes,
edges: data.edges
var network = new vis.Network(container,data,options)

Add user interaction with the network by using interaction property.It will handle the navigation buttons, popups, touch and mouse events and can add options shape of nodes, font, size, edges color, width, smooth and various interactions hideedgesondrag, hidenodesondrag etc.

hideEdgesOnDrag: true,
hideNodesonDrag: true,
selectConnectedEdges: true,
tooltipDisplay: 200,
hover: true

Best Practises Of Graph Visualization

Some of the best practices and solutions kept in mind while handling complex network visualizations

Changing the layout

Complex network visualizations come when contains a large number of nodes and connected with edges, edges can overlap and cross-over, which will make the visualization challenging to understand. The solution for it makes a layout where the crossing points and edges put on absolute minimum.

Reducing graph Complexity

Graph complexity includes the graph in such a way that it will contain all the information but also maintain the overall structure of data. The solution is to use link reduction means to show only edges over a certain weight, means show only sides that are relevant and needs to be displayed. Methods to reduce larger complexity in network graphs are Minimum Spanning Tree and Pathfinder Network Scaling.

Implement Interactivity

The main point to keep in mind is that we have to know the audience, what can be the level of interactivity with the information. Understand how to make the visualization useful to the individual.

Example – change the view, add a three-dimensional view, represent it from the different angles and can change the dataset give weight to edges, cluster nodes.

How to Adopt Graph Visualization?


Overview of Vis.js

  • Vis.js is browser-based, dynamic, network visualization library.
  • Vis.js library uses Canvas, optimized for both speeds of rendering and level of interactivity.
  • Mainly used for Complex Graph (network) visualizations. Network diagrams are primarily for making connections, whether for hierarchical data and others also.
  • Example – Start a network module, plug in the type of node module, edge module, physics module and optionally navigation module, etc.All of these modules individually configured. Massive list of options segmented into smaller, more manageable parts.

Grouping in Graph Visualization

Graph visualization library creates groups, natural to visually separate nodes by shape or color, and clusters, expand, collapse a group of nodes and great event hooks for adding behaviors.

Features of Visualization

Visualizations are easy to use and provide custom shapes, fonts, styles, arrows, labels, colors, sizes, images, and many more. For handling a large number of nodes, it supports clustering feature.

Node Styles

It provides node styles which include circular images, colors, groups, custom groups, icons, node shapes, and node shadows.

Edge Styles

It provides custom arrows, different arrow types, dashes, different colors, smooth curves.

Labels in Visualization

It provides label background, color, sizes and multiple fonts.

Clustering in Visualization

It provides various clustering methods like clustering by zoom; changes clustered nodes and edges.

Visualization Physics Configuration

It provides various features gravitational constant, central gravity, spring Length, spring Constant, avoid overlap, max velocity, min velocity.

Advantages of Enabling Visualization 


Built-in Behaviors

In Vis.js network diagrams have some useful behaviors, like labels that grow, shrink, or disappear together, depending on the space available, and highlighting of connected edges when a user clicks a node.

Large Options

Vis.js includes a variety of shapes for particular nodes or node groups, or replace them altogether with icons or images. We can add tooltips or use HTML in the node labels, making it easy to style and add links.

Visualization Network Module

A network consists of two entities – a node to represent a thing, and an Edge or Vector to describe a relationship between two nodes. Nodes represented as arrays of node objects, edges as arrays of edge objects, with an edge only showing up if it connects two nodes.

Steps to make a program in Vis.js –

A little more complex graph can include arrows, add labels to edges, and change foreground and background colors and shapes. Add physics configuration.

Loading JSON file in Vis.js

Add options shape of nodes, font, size, edge color, width, smooth and various interactions hide edges ondrag, hidenodesondrag, etc.

Top Benefits of Effective Visualization

Interactive visualization of network tools is an essential layer to identify insights and generate value from connected data.

  • Less time in understanding information – As human mind processes visual information faster than in the tabular form or written form. Visualize the data will give more comprehension, which reduces the time to act.
  • Understanding a problem – It provides a better understanding by visualizing patterns and context. Graph visualization tools are mainly to visualize relationships but also to understand the meaning of the data. We will get an overview of how everything is connected which allows identifying trends and correlations in the data.
  • A better way of communication – Visual representations of the network data provide a more comfortable way to understand the data.
  • Higher chance to discover insights by interacting with data.
  • Graph visualization offers the possibility to manipulate the data.

Best Tools for Data Exploration

Top Visualization Libraries