Skip to content

Add Graph visualizer project in brach-vivek #2049

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
vivekxsh wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Add Graph visualizer project in brach-vivek #2049

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
29 changes: 29 additions & 0 deletions Projects/graph visuliser2/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
# Graph visualiser

## Description

This is a simple graph visualiser. It can be used to visualise graphs in a simple way. It is written in javascript

## Features

1. You can select type of graph you want to visualise. You can choose between directed and undirected graph
2. You can add number of vertices you want to have in your graph using <mark> Add Node </mark> button dynamically.
3. You can add edges between vertices using the adjency matrix displayed.
- The matrix is editable. You can change the value of the matrix by clicking on the cell and entering the value.
- 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.
- 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
<table>
<tr><th>Index</th><th>Name of the <mark> to</mark> node</th></tr>
<tr><th>Name of the <mark> from</mark> node</th><td>weight of the edge</td></tr>
</table>
4. Graph nodes span randomly inside the canvas. You can move them around using mouse by draging them. the edges will follow the nodes.

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).
6. You can also change the node label by changing the value in the text box in the leftmost column of the table.

## How to use

1. First you need to select type of graph you want to visualise. You can choose between directed and undirected graph
2. Then you can add number of vertices you want to have in your graph using <mark> Add Node </mark> button
3. Then you can add edges between vertices using the adjency matrix displayed.
4. Graph nodes span randomly inside the canvas. You can move them around using mouse by draging them. the edges will follow the nodes.
71 changes: 71 additions & 0 deletions Projects/graph visuliser2/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,71 @@
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]> <html class="no-js"> <![endif]-->
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Graph Visualiser</h1>
<div class="info-holder">
<p style="font-size:20px;font-weight:bold;">Select Graph Type</p>
<select id="graphType">
<option value="directed">Directed</option>
<option value="undirected">Undirected</option>
</select>
</div>
<button class="btn" type="button" id="addBtn" > Add node</button>

<div class="super-outer">


<div class="outer">

<div class="table-holder inner">
<table id="AdjencyMatrix">
<thead>
<tr id="matrix-header">
<th class="header-element index fix vfix">
index
</th>
</tr>

</thead>
<tbody id="matrix-body">
</tbody>

</table>

</div>
</div>
</div>

<div style="align-self:center;">
<button class="btn" type="button" id="bfsBtn" > BFS</button>
<button class="btn" type="button" id="dfsBtn" > DFS</button>
<button class="btn" type="button" id="dijkstraBtn" > Dijkstra</button>
</div>






<canvas id="canvas" width="1000" height="500">
Your browser does not support the HTML5 canvas tag.
</canvas>
<canvas id="res-canvas" width="1000" height="500">
Your browser does not support the HTML5 canvas tag.
</canvas>


<script src="script.js" async defer></script>
</body>
</html>
Loading