AlgoViz v3.0 — Data Structures & Algorithms Visualizer

An interactive, educational web application for visualizing classic data structures and algorithms in real-time. Built with vanilla HTML5, CSS3, and JavaScript ES6+ modules — zero dependencies, no build step required.

---

🚀 Quick Start

Open index.html in any modern browser.

Note: Because the app uses ES6 modules (type="module"), you need to serve it over HTTP rather than opening the file directly. Use any of:

# Python 3
python3 -m http.server 8080

# Node.js (npx)
npx serve .

# VS Code
Install "Live Server" extension → right-click index.html → Open with Live Server

Then visit http://localhost:8080

---

📁 Project Structure

algoviz/
├── index.html                  ← Entry point, all HTML structure
│
├── css/
│   ├── tokens.css              ← Design tokens & CSS variables (light/dark)
│   ├── base.css                ← Reset, typography, buttons, forms, toasts
│   ├── layout.css              ← Topbar, app layout, canvas area, status bar
│   ├── sidebar.css             ← Navigation sidebar
│   ├── controls.css            ← Playback toolbar, sliders
│   ├── panels.css              ← Right info panel (tabs, pseudocode, stats)
│   ├── modals.css              ← Custom data / share / snapshot modals
│   ├── mobile.css              ← Responsive breakpoints & mobile layout
│   └── animations.css          ← Keyframe animations, transitions
│
└── js/
    ├── main.js                 ← App entry point, wires all modules together
    │
    ├── algorithms/
    │   ├── registry.js         ← All algorithm metadata, pseudocode, complexity
    │   ├── sorting.js          ← Bubble/Selection/Insertion/Merge/Quick Sort + Binary Search
    │   └── graph.js            ← BFS, DFS, Dijkstra, A* step recorders + graph generator
    │
    ├── engine/
    │   ├── AnimationEngine.js  ← Step recorder/player, requestAnimationFrame loop
    │   └── Renderer.js         ← Canvas drawing primitives (bars, nodes, edges, cells)
    │
    ├── visualizers/
    │   └── index.js            ← BarChart, Graph, Grid, LinkedList, Stack, Queue,
    │                              BST, Heap, HashTable visualizers
    │
    ├── ui/
    │   ├── UIManager.js        ← Sidebar, panels, modals, toasts, theme, share, snapshot
    │   ├── DSController.js     ← Interactive buttons for data structure demos
    │   └── CompareMode.js      ← Side-by-side algorithm comparison
    │
    └── utils/
        └── helpers.js          ← Array generators, URL state, localStorage, utilities

---

✨ Features

Algorithms

Category	Algorithm	Visualization
Sorting	Bubble Sort	Animated bars with swap/compare states
Sorting	Selection Sort	Minimum tracking highlight
Sorting	Insertion Sort	Key element insertion animation
Sorting	Merge Sort	Divide-and-conquer subarray coloring
Sorting	Quick Sort	Pivot + partition visualization
Searching	Binary Search	Range elimination + pointer arrows
Graph	BFS	Layer-by-layer node discovery
Graph	DFS	Deep traversal + backtrack
Graph	Dijkstra's	Distance labels, shortest path tree
Pathfinding	A*	Grid with open/closed sets, optimal path

Data Structures

Structure	Interactive Operations
Linked List	Append, prepend, delete head/tail, traverse, reverse
Stack	Push, pop, peek, clear
Queue	Enqueue, dequeue, front, clear
Binary Search Tree	Insert, search, inorder/preorder traversal
Min-Heap	Insert (bubble-up), extract-min (bubble-down), get-min
Hash Table	Set (with collision detection), get, delete, clear

Controls

• ▶ Play/Pause — animated step-through
• ⟨ ⟩ Step backward/forward — frame-by-frame
• ↺ Reset — restart from beginning
• 🎚 Speed slider — 1× to 10×
• 📏 Size slider — n = 5 to 60 elements
• ⌨️ Keyboard — Space play, ←/→ step, R reset, S snapshot

Advanced Features

• 🎛 Custom Data — enter your own array, choose presets (random, sorted, reversed, nearly-sorted, few-unique)
• 📤 Share — URL encodes algorithm + step + array size for sharing
• 📷 Snapshot — download PNG of current canvas with stats overlay + caption
• ⚖️ Compare Mode — run two sorting algorithms side-by-side on identical data
• 🌙 Dark/Light theme — persisted in localStorage
• 📱 Mobile-friendly — responsive drawer sidebar, bottom-sheet panel, touch drag for graph nodes
• 🔍 Sidebar search — filter algorithms by name
• 🌐 Multilingual pseudocode — Pseudocode / JavaScript / Python tabs

---

🎨 Design

• Dark mode first with full light mode support
• Glassmorphism panels, gradient accents
• JetBrains Mono (code) + DM Sans (UI)
• GPU-accelerated canvas with glow effects on active states
• Smooth CSS transitions throughout

---

🌐 Browser Support

Browser	Support
Chrome 90+	✅ Full
Firefox 90+	✅ Full
Safari 15+	✅ Full
Edge 90+	✅ Full
Mobile Chrome	✅ Full
Mobile Safari	✅ Full

---

📄 License

MIT — free to use, modify, and distribute.