An interactive browser-based visualizer for data structures and algorithms, built with HTML, CSS, Canvas, and vanilla JavaScript.
Visual Algorithm Studio turns core computer science concepts into step-by-step visual animations. It includes sorting algorithms, stack and queue demos, linked list operations, binary search tree operations, tree traversals, and BFS pathfinding on an editable grid.
https://fazal305.github.io/visual-algorithm-studio/
- Canvas-based algorithm visualizations
- Step-by-step playback controls
- Play, pause, next, back, and reset actions
- Adjustable animation speed
- Custom comma-separated number input
- Random data generator
- Sorting visualizers for Bubble, Selection, and Insertion Sort
- Circular Queue simulator
- Stack push/pop simulator
- Linked List insert, search, and delete demo
- Binary Search Tree insert and search visualizers
- In-order, pre-order, and post-order traversal visualizers
- BFS grid pathfinding visualizer
- Editable pathfinding grid with start, end, wall, and erase tools
- Algorithm info panel with time and space complexity
- Responsive layout for smaller screens
| Category | Visualizers |
|---|---|
| Sorting | Bubble Sort, Selection Sort, Insertion Sort |
| Queue | Circular Queue |
| Stack | Stack Push / Pop |
| Linked List | Linked List Demo |
| Binary Tree | BST Insert, BST Search, In-order, Pre-order, Post-order |
| Pathfinding | BFS Grid |
- HTML5
- CSS3
- Vanilla JavaScript
- Canvas API
- HTML form controls
visual-algorithm-studio/
|-- index.html
|-- algo-styles.css
|-- algo-script.js
|-- LICENSE
`-- README.md
- Recording algorithm states before rendering
- Drawing data structures on Canvas
- Building playback controls for step-based animations
- Visualizing time and space complexity
- Handling custom input data
- Managing grid editing for pathfinding
- Keeping UI state in sync with algorithm state
- Designing an educational developer tool
Open index.html in a browser.
No dependencies, package installation, or build step are required.
Built by Fazal Abbas.
- GitHub: https://github.com/fazal305
- LinkedIn: https://www.linkedin.com/in/fazal-abbas-4653dg86
This project is licensed under the MIT License.