Skip to content

Susheyyy/Graph-Algorithm-Visualizer

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

12 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Mini-Project-1A

The Graph Algorithm Visualizer is an interactive web-based tool built using Python, HTML, CSS, and JavaScript that provides dynamic step-by-step visual simulations of graph algorithms, helping learners clearly understand how nodes are processed, distances are updated, and optimal paths are formed.

Features

- Interactive graph creation with custom nodes, edges, and weights
- Step-by-step visualization of four algorithms: Dijkstra, Bellman-Ford, Prim, and Kruskal
- Side-by-side algorithm comparison with execution time and performance metrics
- Playback controls (play, pause, next step, reset) for detailed learning
- Real-time visualization using color-coding for nodes, edges, and algorithm states
- Supports weighted graphs and negative edges (Bellman-Ford)
- Displays final MST/shortest path along with total cost and steps taken

Tech Stack

  • Frontend: HTML, CSS, JavaScript
  • Backend: Python, Flask

Installations

1. Clone the Repository

git clone https://github.com/Susheyyy/Mini-Project-1A.git
cd Mini-Project-1A 

2. Create a python environment (recommended)

python -m venv venv 

Activate the environment

  • Windows
venv\Scripts\activate 
  • macOS / Linux
source venv/bin/activate 

3. Install Dependencies

pip install -r requirements.txt 

3. Install Dependencies

python app.py

How to Use

Single Algorithm Visualizer

  1. Enter the number of nodes, edges, and their weights.
  2. Select an algorithm (Dijkstra, Bellman-Ford, Prim, or Kruskal).
  3. Click Visualize to see the step-by-step execution.
  4. Use Play, Pause, Next, and Reset to control the animation.
  5. View the final path/MST, total cost, and number of steps.

Algorithm Comparison

  1. Open the Comparison page.
  2. Select any two algorithms.
  3. Enter your graph details once.
  4. Click Compare to run both visualizations side-by-side.
  5. Compare execution time, cost, and traversal behavior.

Try a new graph

At any time, you can:

  • Clear the graph
  • Change inputs
  • Run a different algorithm
  • Switch to comparison mode

About

The Graph Algorithm Visualizer is an interactive web-based tool built using Python, HTML, CSS, and JavaScript that provides dynamic step-by-step visual simulations of graph algorithms, helping learners clearly understand how nodes are processed, distances are updated, and optimal paths are formed.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors