An interactive platform to learn, visualize, and understand popular Data Structures & Algorithms through beautiful animations, real-time execution, and code templates.
- 🎨 Modern Dark UI
- 📱 Fully Responsive Design
- ⚡ Smooth Algorithm Animations
- 📊 Step-by-Step Visualization
- 💻 Ready-to-use C, C++ and Python Code
- 📋 One Click Copy Code
- 🗺️ Interactive Pathfinding Map
- ♟️ Backtracking Visualizations
- ⌨️ Typewriter Animation
- 🚀 Fast and Lightweight
The sorting visualizer shows how elements move during sorting with animated bars.
Repeatedly compares adjacent elements and swaps them if they are in the wrong order.
Time Complexity
| Best | Average | Worst |
|---|---|---|
| O(n) | O(n²) | O(n²) |
Finds the smallest element and places it at its correct position one by one.
Time Complexity
| Best | Average | Worst |
|---|---|---|
| O(n²) | O(n²) | O(n²) |
Builds the sorted array one element at a time by inserting elements into their proper position.
Time Complexity
| Best | Average | Worst |
|---|---|---|
| O(n) | O(n²) | O(n²) |
Uses Divide and Conquer by recursively splitting the array and merging sorted halves.
Time Complexity
| Best | Average | Worst |
|---|---|---|
| O(n log n) | O(n log n) | O(n log n) |
Chooses a pivot element and partitions the array into smaller and larger values.
Time Complexity
| Best | Average | Worst |
|---|---|---|
| O(n log n) | O(n log n) | O(n²) |
Builds a Binary Heap from the input array and repeatedly extracts the maximum (or minimum) element to produce a sorted array.
How it Works
- Build a Max Heap from the array.
- Swap the root (largest element) with the last element.
- Reduce the heap size by one.
- Heapify the root to maintain the heap property.
- Repeat until the array is sorted.
Time Complexity
| Best | Average | Worst |
|---|---|---|
| O(n log n) | O(n log n) | O(n log n) |
Finds the shortest path from a source vertex to every other vertex in a weighted graph.
Applications
- GPS Navigation
- Network Routing
- Delivery Optimization
Time Complexity
O((V + E) log V)
Explores vertices level by level using a queue.
Applications
- Shortest Path (Unweighted Graph)
- Social Networks
- Web Crawling
Time Complexity
O(V + E)
Traverses graph deeply before backtracking.
Applications
- Cycle Detection
- Topological Sorting
- Connected Components
Time Complexity
O(V + E)
Places N queens on a chessboard so that no two queens attack each other.
Visualization includes
- Safe Position Checking
- Queen Placement
- Backtracking
- Final Solution
Time Complexity
O(N!)
Assigns colors to graph vertices so that no adjacent vertices have the same color.
Visualization includes
- Color Assignment
- Conflict Detection
- Backtracking
- Minimum Valid Coloring
Applications
- Scheduling
- Register Allocation
- Map Coloring
Every algorithm provides implementation in
- C
- C++
- Python
Features
- Syntax Highlighting
- Copy Button
- Easy Learning
- Beginner Friendly
algo-visualizer/
│
├── index.html
│ Main webpage layout and UI structure
│
├── style.css
│ Dark theme styling, animations, responsive layout, and component design
│
├── server.py
│ Lightweight Python HTTP server used for running the project locally
│
├── algorithms.cpp
│ C++ implementations of the algorithms used as backend references
│
└── js/
│
├── main.js
│ Controls navigation, tab switching, typewriter effect,
│ copy-to-clipboard functionality, and UI interactions
│
├── sorting.js
│ Handles sorting algorithm animations including Bubble,
│ Selection, Insertion, Merge, and Quick Sort
│
├── graphs.js
│ Implements graph visualizations, shortest path algorithms,
│ and interactive Indian city map pathfinding
│
├── backtracking.js
│ Contains visualizers for N-Queens and Graph Coloring
│ using recursive backtracking
│
└── code_templates.js
Stores C, C++, and Python implementations displayed
inside the code viewer
git clone https://github.com/your-username/algo-visualizer.gitcd algo-visualizerpython server.pyor
python3 server.pyOpen your browser and visit
http://localhost:8000
This project helps students understand
- Sorting Algorithms
- Graph Algorithms
- Backtracking Techniques
- Time Complexity
- Algorithm Visualization
- Code Implementation
- Data Structure Fundamentals
- HTML5
- CSS
- JavaScript
- C++
- Python
If you found this project useful, consider giving it a ⭐ Star on GitHub to support future development.
Made with ❤️ to make Algorithms easier to understand through visualization.