A web-based algorithm visualizer built with Flask, Python, and JavaScript.
This application allows users to:
- Visualize sorting algorithms step-by-step
- Compare algorithm performance
- Analyze time complexity
- Benchmark runtime and operation counts
This project was built to:
- Understand how sorting algorithms work internally
- Visualize algorithm behavior in real-time
- Compare theoretical complexity vs actual runtime
- Strengthen full-stack development skills
The application supports both:
- Visual Mode – animated step-by-step sorting
- Benchmark Mode – runtime and operation comparison
- Bubble Sort
- Selection Sort
- Insertion Sort
- Merge Sort
Each algorithm includes:
- Operation counting
- Time complexity analysis
- Step tracking for animation
- Dynamic bar width (responsive to array size)
- Color-coded highlights:
- 🔴 Comparison
- 🟠 Swap
- 🟢 Insert / Overwrite
- 🟡 Minimum index change
- 🟣 Shift
- Adjustable animation speed
- Supports custom and randomly generated arrays
- Compare two algorithms side-by-side
- Runtime measurement (milliseconds)
- Operation count comparison
- Displays theoretical time complexities:
- Best case
- Average case
- Worst case
- Input validation for numeric arrays
- Maximum array size protection
- Mode and algorithm validation
- Graceful error handling
- Backend
- Python
- Flask
- Frontend
- HTML5
- CSS3
- Bootstrap 5
- JavaScript (Vanilla)
- Chart.js
- Clone this repository:
git clone https://github.com/harsij01/algorithm_visualizer
cd algorithm_visualizer- Create a Virtual Environment (Recommended)
Windows:
python -m venv venv
venv\Scripts\activateMac/Linux:
python3 -m venv venv
source venv/bin/activate- Install Dependencies
pip install -r requirements.txt- Run the Application
python app.py- Open in Browser
http://127.0.0.1:5000
