Skip to content

Commit a440ea1

Browse files
dhruvmilludhruvmillu
committed
added Graph visualiser
1 parent 7b05683 commit a440ea1

4 files changed

Lines changed: 766 additions & 0 deletions

File tree

‎Projects/graph visuliser/README.md‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
# Graph visualiser
2+
3+
## Description
4+
5+
This is a simple graph visualiser. It can be used to visualise graphs in a simple way. It is written in javascript
6+
7+
## Features
8+
9+
1. You can select type of graph you want to visualise. You can choose between directed and undirected graph
10+
2. You can add number of vertices you want to have in your graph using <mark> Add Node </mark> button dynamically.
11+
3. You can add edges between vertices using the adjency matrix displayed.
12+
- The matrix is editable. You can change the value of the matrix by clicking on the cell and entering the value.
13+
- The matrix is symmetrical in undirected graph. If you change the value of the cell in row 1 and column 2, the value of the cell in row 2 and column 1 will also change.
14+
- for the directed graph, the matrix is not symmetrical. If you change the value of the cell in row 1 and column 2, the value of the cell in row 2 and column 1 will not change. and is of form
15+
<table>
16+
<tr><th>Index</th><th>Name of the <mark> to</mark> node</th></tr>
17+
<tr><th>Name of the <mark> from</mark> node</th><td>weight of the edge</td></tr>
18+
</table>
19+
4. Graph nodes span randomly inside the canvas. You can move them around using mouse by draging them. the edges will follow the nodes.
20+
21+
5. You can also apply Dijkstra's algorithm to find shortest path between two nodes. To do that you need to select two nodes and then click <mark> Dijkstra </mark> button. The shortest path will be displayed in red color. Apart from them you can also apply BFS and DFS algorithms to find all nodes that are reachable from the selected node. To do that you need to select one node and then click <mark> BFS </mark> or <mark> DFS </mark> button.( all the algorithms are applied on node 1).
22+
6. You can also change the node label by changing the value in the text box in the leftmost column of the table.
23+
24+
## How to use
25+
26+
1. First you need to select type of graph you want to visualise. You can choose between directed and undirected graph
27+
2. Then you can add number of vertices you want to have in your graph using <mark> Add Node </mark> button
28+
3. Then you can add edges between vertices using the adjency matrix displayed.
29+
4. Graph nodes span randomly inside the canvas. You can move them around using mouse by draging them. the edges will follow the nodes.

‎Projects/graph visuliser/index.html‎

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
<!DOCTYPE html>
2+
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
3+
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
4+
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
5+
<!--[if gt IE 8]> <html class="no-js"> <![endif]-->
6+
<html>
7+
<head>
8+
<meta charset="utf-8">
9+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
10+
<title></title>
11+
<meta name="description" content="">
12+
<meta name="viewport" content="width=device-width, initial-scale=1">
13+
<link rel="stylesheet" href="style.css">
14+
</head>
15+
<body>
16+
<h1>Graph Visualiser</h1>
17+
<div class="info-holder">
18+
<p style="font-size:20px;font-weight:bold;">Select Graph Type</p>
19+
<select id="graphType">
20+
<option value="directed">Directed</option>
21+
<option value="undirected">Undirected</option>
22+
</select>
23+
</div>
24+
<button class="btn" type="button" id="addBtn" > Add node</button>
25+
26+
<div class="super-outer">
27+
28+
29+
<div class="outer">
30+
31+
<div class="table-holder inner">
32+
<table id="AdjencyMatrix">
33+
<thead>
34+
<tr id="matrix-header">
35+
<th class="header-element index fix vfix">
36+
index
37+
</th>
38+
</tr>
39+
40+
</thead>
41+
<tbody id="matrix-body">
42+
</tbody>
43+
44+
</table>
45+
46+
</div>
47+
</div>
48+
</div>
49+
50+
<div style="align-self:center;">
51+
<button class="btn" type="button" id="bfsBtn" > BFS</button>
52+
<button class="btn" type="button" id="dfsBtn" > DFS</button>
53+
<button class="btn" type="button" id="dijkstraBtn" > Dijkstra</button>
54+
</div>
55+
56+
57+
58+
59+
60+
61+
<canvas id="canvas" width="1000" height="500">
62+
Your browser does not support the HTML5 canvas tag.
63+
</canvas>
64+
<canvas id="res-canvas" width="1000" height="500">
65+
Your browser does not support the HTML5 canvas tag.
66+
</canvas>
67+
68+
69+
<script src="script.js" async defer></script>
70+
</body>
71+
</html>

0 commit comments

Comments
 (0)