Visualize Graphs Using Vis.js

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.