Interactive visualizations for data structures and algorithms
Step through algorithms at your own pace. See how the code executes. Build real intuition.
Topics • Features • Get Started • Structure • Tech Stack
DS-Algo Playground is a zero-dependency, pure HTML/CSS/JavaScript web app that helps you understand data structures and algorithms through interactive, step-by-step canvas visualizations.
No frameworks. No build tools. No installs. Just open and learn.
Every topic includes:
- A clear explanation of how the algorithm works
- An interactive canvas visualization — play, pause, step through, adjust speed
- Code implementations in Python, Java, and C++
- Complexity analysis with time & space breakdowns
- A quiz to test your understanding
| Topic | Description |
|---|---|
| Arrays | Access, insert, delete, and search operations with shifting animation |
| Linked Lists | Singly linked list traversal and pointer manipulation |
| Stack | Push, pop, and peek with vertical column visualization |
| Queue | Enqueue, dequeue with front/rear pointer tracking |
| Hash Table | Hash function visualization, collision resolution with chaining |
| Binary Search Tree | Insert, search, delete, and inorder/preorder/postorder traversals |
| Heap | Max-heap with synchronized tree + array dual view |
| Topic | Description |
|---|---|
| Bubble Sort | Adjacent-swap sorting with early-termination optimization |
| Selection Sort | Scan for minimum, swap into sorted position |
| Insertion Sort | Key-lift, shift-right, and drop-in-place insertion |
| Merge Sort | Recursive divide phase and merge phase visualization |
| Quick Sort | Pivot partitioning with left/right pointer scanning |
| Topic | Description |
|---|---|
| Binary Search | Divide-and-conquer search with low/mid/high pointers |
| BFS | Breadth-first graph traversal with queue visualization |
| DFS | Depth-first graph traversal with stack and backtracking |
| Topic | Description |
|---|---|
| Two Pointers | Converging pointers for pair-sum in sorted arrays |
| Sliding Window | Fixed-size window for maximum subarray sum |
| Dynamic Programming | Tabulation-based Fibonacci with DP table filling |
| Recursion | Fibonacci call tree with recursive DFS traversal |
Every algorithm is rendered on an HTML5 Canvas with full playback controls — play, pause, step forward/back, reset, and adjustable speed. Each step includes a plain-English explanation of what's happening and why.
Pick any two sorting algorithms and run them side-by-side on the same input array. Compare their approaches, step counts, and behavior visually.
Watch 5 sorting algorithms race on the same array simultaneously. Progress bars and a winner announcement show you which algorithm finishes first.
Interactive plot of O(1), O(log n), O(n), O(n log n), O(n^2), and O(2^n) growth curves. Adjust n with a slider and toggle individual curves on/off.
Every topic shows implementations in Python, Java, and C++ with syntax highlighting, tabbed navigation, and a one-click copy button.
Toggle between dark and light modes with t. Your preference is saved across sessions. Auto-detects OS preference on first visit.
Press ? on any page to see all shortcuts:
| Key | Action |
|---|---|
t |
Toggle theme |
/ |
Focus search |
Space |
Play / Pause visualization |
← → |
Step backward / forward |
? |
Show shortcuts modal |
Esc |
Close modal / search |
Completed topics are tracked with visual badges on the sidebar. Progress persists across sessions via localStorage.
Works on desktop, tablet, and mobile. Canvas visualizations resize to fit the viewport.
Visit the live site — no setup, no install, just open and learn.
If you'd like to contribute or run locally, see Contributing.
DS-Algo-Playground/
├── index.html # Home page with topic grid
├── compare.html # Side-by-side algorithm comparison
├── race.html # Algorithm race (5 sorting algos)
├── complexity.html # Big-O growth rate visualizer
├── about.html # About page
│
├── topics/ # 19 topic pages
│ ├── arrays.html
│ ├── linked-lists.html
│ ├── stack.html
│ ├── queue.html
│ ├── hash-table.html
│ ├── bst.html
│ ├── heap.html
│ ├── bubble-sort.html
│ ├── selection-sort.html
│ ├── insertion-sort.html
│ ├── merge-sort.html
│ ├── quick-sort.html
│ ├── binary-search.html
│ ├── bfs.html
│ ├── dfs.html
│ ├── two-pointers.html
│ ├── sliding-window.html
│ ├── dynamic-programming.html
│ └── recursion.html
│
├── js/
│ ├── visualization-core.js # Playback engine (play/pause/step/speed)
│ ├── viz-utils.js # Shared drawing primitives
│ ├── sidebar-nav.js # Dynamic sidebar from topics.json
│ ├── code-trace.js # Code line highlighting + variable watch
│ ├── challenge.js # Challenge mode infrastructure
│ ├── main.js # App entry point and init router
│ ├── progress.js # Progress tracking with badges
│ ├── search.js # Fuzzy topic search
│ ├── theme.js # Dark/light theme toggle
│ ├── keyboard.js # Global keyboard shortcuts
│ ├── quiz.js # Quiz scoring engine
│ ├── code-block.js # Syntax highlighting + copy
│ ├── sidebar.js # Sidebar open/close behavior
│ └── topics/ # 19 visualization modules
│ ├── arrays-viz.js
│ ├── linked-lists-viz.js
│ ├── bubble-sort-viz.js
│ └── ... (one per topic)
│
├── css/
│ ├── main.css # CSS imports
│ ├── variables.css # Theme color tokens
│ ├── visualization.css # Canvas + controls + challenge styles
│ ├── code-trace.css # Code highlighting styles
│ ├── code.css # Code block styles
│ ├── components.css # Buttons, cards, badges
│ ├── layout.css # Grid and sidebar layout
│ ├── topic.css # Topic page layout
│ └── reset.css # CSS reset
│
├── data/
│ ├── topics.json # Topic registry (drives sidebar + progress)
│ └── complexity-data.json # Big-O reference data
│
└── .github/workflows/
└── deploy.yml # GitHub Pages deployment
| Layer | Technology |
|---|---|
| Rendering | HTML5 Canvas 2D API |
| Language | Vanilla JavaScript (ES5, IIFE modules) |
| Styling | CSS Custom Properties for dark/light theming |
| Storage | localStorage for progress + theme persistence |
| Hosting | GitHub Pages via GitHub Actions |
| Dependencies | None — zero external libraries |
This project is built purely for educational purposes — to help students, self-learners, and developers understand data structures and algorithms through interactive visualizations.
Contributions are welcome and encouraged! Whether it's:
- Adding a new topic or algorithm
- Improving an existing visualization
- Fixing bugs or typos
- Enhancing mobile responsiveness
- Translating content
Feel free to open an issue or submit a pull request.
MIT License. See LICENSE for details.
Built with the help of AI (Claude) — prompted, guided, and curated by a human.