...
/Graph Data Creation and Rendering
Graph Data Creation and Rendering
Implement the functionality to create the graph data for the problem statement and render it on the HTML web page.
We'll cover the following...
Introduction
Now let's start implementing our travel planner project. We'll follow the steps mentioned below to build the project:
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.
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:
// List of citiesconst cities = ["New York", "Denver", "California", "San Fransisco", "Las Vegas","Seattle", "Chicago", "Los Angeles", "Dallas", "Columbus"];// Function to create data for our travel planner projectfunction createDataForTravelPlanner(){// Initialising number of nodes in the graph dynamicallynumVertices = Math.floor(Math.random() * cities.length) + 1;// Create data for verticeslet vertices = [];for(let i = 1; i <= numVertices; i++){// Storing the id and the name of the cityvertices.push({ id: i, label: cities[i - 1] })}// Creating data for edgeslet edges = [];for(let i = 2; i <= numVertices; i++) {// Randomly picking a neighbour node from 0 to i - 1 to create an edgelet neighbour = i - Math.floor(Math.random() * Math.min(i - 1, 3) + 1);// Adding the edge between the node and the neighbouredges.push({ type: 0, // 0 denotes bus route and 1 denotes air routefrom: i, // the nodeto: neighbour, // the neighbourcolor: 'orange', // color of the edgelabel: String(Math.floor(Math.random() * 70) + 30) //random distance});}// We will use these variables in later part of the chaptersrc = 1;dst = numVertices;// Add randomness to the edges in the graphfor(let i = 1; i <= numVertices/2; ){// Generate two random integers in the range of 1 to numVerticeslet n1 = Math.floor(Math.random() * numVertices) + 1;let n2 = Math.floor(Math.random() * numVertices) + 1;if(n1 != n2) {if(n1 < n2) {// swap n1 and n2 to make n1 larger than n2let tmp = n1;n1 = n2;n2 = tmp;}// Create a flag to store three states:// 1. Assign value of 0 if there is no edge between n1 and n2// 2. Assign value of 1 if there is an edge denoting the bus route// 3. Assign value of 2 if there is an edge denoting the aeroplane routelet typeOfEdge = 0;// Iterate for all the edgesfor(let j = 0; j < edges.length; j++) {// Check if edge between n1 and n2 already existsif(edges[j]['from'] === n1 && edges[j]['to'] === n2) {// Check for the bus routeif(edges[j]['type'] === 0)typeOfEdge = 1; // flag to denote bus route existelsetypeOfEdge = 2; // flag to denote air route exist}}// Check if a bus or no route exists between n1 and n2if(typeOfEdge <= 1) {// If no route existsif (typeOfEdge === 0 && i < numVertices / 4) {// Create an edge between n1 and n2edges.push({type: 0,from: n1,to: n2,color: 'orange',label: String(Math.floor(Math.random() * 70) + 30)});} else {// Create an edge for air route between n1 and n2edges.push({type: 1,from: n1,to: n2,color: 'green',label: String(Math.floor(Math.random() * 50) + 1)});}i++;}}}// Creating the data object for vislet data = {nodes: vertices,edges: edges};// Return the final object containing the information for the graphreturn data;}const graphData = createDataForTravelPlanner();console.log(graphData);
Explanation
We'll only explain the highlighted code in the above code snippet, because the rest of the code is ...