An interactive, comprehensive algorithm visualization platform with 50+ algorithms, 12 programming languages, interactive sound effects, and a Programming Language Arena!
- Bubble Sort, Quick Sort, Merge Sort, Insertion Sort
- Selection Sort, Heap Sort, Counting Sort, Radix Sort
- Shell Sort, Tim Sort, and more!
- Binary Search, Linear Search, Jump Search
- Interpolation Search, Exponential Search, Ternary Search
- BFS, DFS, Dijkstra's, A* Search, Greedy Best-First
- BFS, DFS, Dijkstra's, Bellman-Ford, Floyd-Warshall
- Kruskal's MST, Prim's MST, Topological Sort, A*
- Inorder, Preorder, Level Order Traversal
- BST Insert, Lowest Common Ancestor
- Fibonacci, 0/1 Knapsack, LCS, LIS
- Coin Change, Edit Distance
- KMP Pattern Matching, Rabin-Karp
- GCD (Euclidean), Sieve of Eratosthenes
- Fast Exponentiation, Modular Exponentiation
Race different programming languages against each other!
- Compare execution speeds
- Visualize with animated runners
- See which language wins for different algorithms
- Languages: JavaScript, Python, Java, C++, Go, Rust, C#, Ruby
| Language | Icon | Code Display |
|---|---|---|
| JavaScript | 🟨 | ✅ |
| Python | 🐍 | ✅ |
| Java | ☕ | ✅ |
| C++ | ⚡ | ✅ |
| C# | 🟣 | ✅ |
| Go | 🐹 | ✅ |
| Rust | 🦀 | ✅ |
| TypeScript | 🔷 | ✅ |
| Ruby | 💎 | ✅ |
| Swift | 🍎 | ✅ |
| Kotlin | 🎯 | ✅ |
| C | 🔵 | ✅ |
Interactive sounds for:
- 🎵 Value comparisons (pitch based on value)
- 🔀 Swaps (swoosh effect)
- ✅ Success/Found (major chord)
- 🎉 Algorithm completion (fanfare)
- ❌ Not found (error tone)
- 📍 Step/Visit sounds (for graphs/trees)
# Clone the repository
git clone https://github.com/UGilfoyle/Algorithm-visualizer.git
cd Algorithm-visualizer
# Start a local server (Python 3)
python3 -m http.server 8000
# Or with Node.js
npx http-server -p 8000Then open: http://localhost:8000
- VS Code Live Server - Install extension, right-click
index.html - Direct open - Double-click
index.html(some features may not work)
| Key | Action |
|---|---|
1-9 |
Switch between sections |
Space |
Start visualization |
R |
Reset/Shuffle |
M |
Toggle sound |
algorithm-visualizer/
├── index.html # Main HTML structure
├── styles.css # Styling and animations
├── main.js # Main app controller
├── algorithms.js # 50+ algorithms with multi-language code
├── visualizer.js # Visualization engines
├── audio.js # Sound effects engine
└── README.md # This file
- HTML5 - Semantic structure
- CSS3 - Animations, Grid, Flexbox
- JavaScript ES6+ - Async/await, Classes, Modules
- Web Audio API - Sound synthesis
- Canvas API - Graph visualizations
- No dependencies - Pure vanilla JavaScript!
Based on real-world benchmarks:
| Language | Speed Factor | Type |
|---|---|---|
| C/C++ | 1.0x | Native compiled |
| Rust | 1.05x | Native compiled |
| Swift | 1.5x | LLVM compiled |
| Go | 1.8x | Compiled + GC |
| Java | 2.0x | JIT compiled |
| C# | 2.2x | JIT compiled |
| JavaScript | 3.0x | V8 JIT |
| Python | 45x | Interpreted |
| Ruby | 50x | Interpreted |
MIT License - Feel free to use and modify!
Made with ❤️ for learning algorithms
🌟 Star this repo if you find it useful!