vis.js

vis.js is a JavaScript library with a modular structure. It contains multiple components like Network, Timeline, Graph2D, and Graph3D. It is a powerful tool that helps with the dynamic visualization of data. This data can be updated in real time, causing changes in the graph elements. It is used by many developers and is supported across almost all web browsers. Almende B.V. originally developed it, but it is now a community-driven project and is hosted on GitHub. This library is set apart from many other libraries by handling large datasets efficiently and being entirely JavaScript-based, implying that it can run completely using only the browser and that no heavy external libraries need to be installed. It can also smoothly render the animations without lag while having highly intuitive interaction. Its physics engine makes the interaction feel more realistic and fun.

• Using a CDN (Recommended for Quick Use)
  Simply add this script to your HTML file:
  <script type="text/javascript" src="https://unpkg.com/vis-network/standalone/umd/vis-network.min.js"></script>
• Using npm (For Node.js Projects)
  Run the following command in your terminal:
  npm install vis-network
  Then, import it into your JavaScript file:
  import { Network } from "vis-network";
  It works with well with Reaxt, Vue and Node.js projects
• Downloading Manually
  Go to vis.js GitHub
  Download the latest vis-network.min.js file and include it in your project.

1. Components of vis.js

   • Network Visualization : Create dynamic, customizable network graphs with support for custom shapes, styles, colours, sizes, and images. The library ensures smooth performance on modern browsers, even with datasets comprising thousands of nodes and edges. These graphs are wonderful for visualizing the connections between different elements and interacting with the different nodes and connections is also possible, along with this we can change the attributes of the physics engine to make it feel the way we want it to. [1]
   • Timeline Visualization : Develop fully customizable, interactive timelines that can display items and ranges, making it ideal for time-based data representation. This can easily be added, and the inbuilt features make it easy for us to move through and interact with the elements of the timeline.[2]
   • 3D and 2D Graphs : Generate interactive, animated 3D and 2D graphs, including surfaces, lines, dots, and block styles, to represent complex data structures.
   • Data Management : Utilize the vis-data module to manage unstructured data efficiently, allowing for seamless addition, updating, and removal of data points. The changes pushed from the user side can update the elements in real time using vis.js data management.

2. Real-Time Updates & Animations

   • You can add, remove, or modify data while the visualization is running.
   • Items can be animated to move smoothly instead of jumping suddenly.
   • Works well for live dashboards and monitoring systems.

3. Highly Customizable

   • You can change colors, shapes, and sizes of elements.
   • Supports custom icons and images inside the visualization.
   • You can use CSS styles to make it look however you want.

4. Easy to Use with Other Libraries

   • Can be combined with React, Angular, Vue.js or other frameworks.
   • Works well with JSON, APIs, and databases to get data dynamically.
   • Can be embedded in websites, dashboards, and mobile apps.

5. Works in Any Browser Without Extra Software

   • No need to install anything special—just include a script in HTML.
   • Works onChrome, Firefox, Safari, Edge, and mobile browsers.
   • No need for backend servers or external tools.

Till now you have see what is possible with vis.js now we will show you the basic concepts of how this functions.

1. Components of vis.js

   When working with vis.js, you deal with three main parts:

   1. Data (Nodes & Edges / Items)

      • Nodes (in graphs/networks) or Items (in timelines) are the core elements.
      • Edges define connections between nodes.
      Example (Graph Data in JSON):

                      
      var nodes = new vis.DataSet([ 
      { id: 1, label: "Node 1" }, 
      { id: 2, label: "Node 2" } ]);  
      var edges = new vis.DataSet([ 
      { from: 1, to: 2 } 
      ]);
                    

      Here, we created two nodes and one edge connecting them (Node 1 has been connected to Node 2).

   2. Container (HTML Div)

      vis.js needs an HTML element where it will render the visualization.
      <div id="mynetwork"></div >
      This div is like a place where the library draws the visualization.

   3. Creating the Visualization (JavaScript Object)

      To render the graph, we pass the data and settings to vis.js’s rendering engine:

                      
      var data = { nodes: nodes, edges: edges }; 
      var options = {};  // (Custom settings can be added here) 
      var network = new vis.Network(container, data, options);
                    

      This creates an interactive network graph inside the div.





2. Features That Make It Work

   • Physics Engine: Nodes move dynamically like in real-life force-directed graphs you can change how they behave by using different attributes like: gravitationalConstant, gravitationalConstant, etc.
   • Events & Interactions : Click, hover, drag nodes, zoom, etc, can be used to control the behaviour of the elements, for example when we click on a node it’s shape changes and so on.
   • Customization : Change colors, shapes, line styles, through CSS.
   • Real-time Updates: You can modify the dataset dynamically, the changes pushed from the client side can directly influence the graphs that are made using vis.js .

Example:

A Simple Timeline
Here’s how vis.js handles a timeline visualization:

        
var items = new vis.DataSet([ 
{ id: 1, content: "Event 1", start: "2023-01-01", end: "2023-02-10" },      
{ id: 2, content: "Event 2", start: "2023-02-15" , end: "2023-03-9" }]); 
var container = document.getElementById("timeline"); 
var timeline = new vis.Timeline(container, items, {}); 
      

This creates a scrollable timeline with draggable events.

• vis.DataSet([])is a function creates a dynamic dataset.
inside this we include the elements that we want to display on the timeline along with the time.

Each element would contain id (A unique identifier for the event), content (The text that will be displayed with the element), start (The position at which the event occurs) and end (The time at which the event would end).

• document.getElementById("timeline") accesses the div where the timeline will be displayed.
• new vis.Timeline(container, items, {}) creates a new timeline inside the div, creating the object, in this we have to give the information where to place the timeline, the dataset to be included, along with additional arguments which haven’t been included for this simple example.

This simple example shows how easy it is to use this library. Along with this we can scale this up to create complex networks, timelines and graphs for visualization, while having high performance.

Dynamic data
There are various ways to achieve dynamic data based on the type of application. One of the cases when instantaneous data is needed, Websockets is used .

        
var socket = new WebSocket("wss://example.com/live-updates"); // socket is created 
//Websocket is an inbuilt protocol that is present in web browser, 
//which opens up a two channel to exchange information. 
socket.onmessage = function (event) {  
let data = JSON.parse(event.data); items.add(data);  // adds the data to the dataset. 
}; 
      

In this code whenever new information arrives through the link this information is directly updated in the dataset thereby changing the vis.js graphs that use the dataset.

• Enhanced City Routes Visualization

  A City Travel Routes Visualization using vis.js is an interactive tool to explore urban transportation networks. It dynamically displays travel routes (e.g., bus, subway, bike lanes) with features like:
  1. Interactive Timeline: Analyze travel patterns over time, highlighting peak hours or seasonal trends.
  2. Real-Time Updates: Show live traffic, delays, or route changes using transit APIs.
  3. Heatmaps: Highlight traffic density or route usage to identify bottlenecks or underutilized areas.
  4. Custom Filters:Focus on specific modes, regions, or time periods for detailed analysis.
  This tool benefits planners (optimize infrastructure), commuters (plan efficient routes), and transit authorities (monitor performance).
  

  Given below is a really simple example of how it is might be used :

  
  

Vis.js is a handy and powerful library that makes building dynamic, interactive graphs a breeze. Whether you're working on a small project or a large-scale application, it scales effortlessly to meet your needs. With its built-in physics engine, smooth animations, and plenty of customization options, it creates a great user experience without much hassle on the client side. Plus, it plays well with different data sources and frameworks, making it a reliable choice for everything from network analysis to project management and data visualization. If you're looking for a flexible and easy-to-use graphing tool, vis.js is a great tool that should be considered by the developers.

[1] ,[2] are embeds taken from the official vis.js website . The other codes were written by us.
For Further reading please visit the official vis.js website or the official vis.js github .