Visualize Graphs Using Vis.js
Get an overview of the vis.js library and use it to render network graphs on the HTML web page.
What is vis.js?
We are going to use a browser-based visualization library called vis.js to render the graphs on the HTML web pages. With vis.js, we can create and render different types of visualizations such as networks, 2D and 3D graphs, datasets, and many more.
We will be making a network (graph) where nodes denote a city and edges will denote the distances between cities. The network visualizations are easy to use, and we can add custom nodes, shapes, data, color, size, etc. to the network. We can even drag and drop each node in the network graph, which can result in really exciting visualization. Below is an example of the network that we are going to build:
Please click on the "Generate Graph" button shown below to generate and render a network graph on the HTML web page.
Build the network graph
To build the network graph using vis, we will follow the steps mentioned below:
Create a configuration object that will contain information about how the edges and nodes will look, the font style, the font color, the shape of the nodes, etc.
Create the data containing two objects: nodes and edges. Each node will denote a city and each edge will denote a route between two cities. We will also assign a random weight to each edge that will denote the distance between the two cities. ...