Graph Data Creation and Rendering

Introduction

Now let's start implementing our travel planner project. We'll follow the steps mentioned below to build the project:

1. Create the data for the project. This data is just the graph with cities as nodes, the route to travel from one city to another as edges, and the time taken to travel from one city to another as weights. There will be two types of routes from one city to another, namely the route taken when going by bus and the route taken when flying. We will add some randomness to our graphs so that the structure of the graphs differs for each run.

2. We will create the UI and partition it into two vertical sections. On the left side, we will display the graph generated using the logic written in the previous step. We will complete the logic for the right side in the later part of the chapter.

Now let's start implementing the functionalities.

Create the graph data for the project

Let's create a function to generate the graph data. The function is going to be almost the same as discussed in the Visualize Graphs Using Vis.js lesson, with some minor differences. Here's the code: