A browser-based tool to learn and explore Data Structures and Algorithms through interactive, step-by-step animations. Built entirely with vanilla HTML, CSS, and JavaScript — no frameworks, no dependencies, no build step.
- Core Features
- Data Structures Covered
- Screenshots
- Architecture Overview
- Project Structure
- Tech Stack
- Setup and Installation
- Play, Pause, and Reset controls for full control over each animation
- Speed slider to adjust animation pace across five levels
- Each operation is broken into individual steps so nothing happens all at once
- Displays the relevant pseudocode for the selected operation
- Highlights the current line in real time as the animation progresses
- Helps connect what is happening visually to what the algorithm is actually doing
- A live sidebar that prints a plain-English description of each step
- Explains comparisons, pointer movements, insertions, and deletions as they happen
- Auto-scrolls to the latest entry
- Default nodes are shown in blue
- The current node being processed is highlighted in red
- Visited nodes turn green
- A successfully found node is highlighted in yellow
- Tabbed panel system on smaller screens (Visual, Code, Log)
- Responsive design that adapts across desktop and mobile viewports
| Data Structure | Operations |
|---|---|
| Array | Create, Insert at index, Delete at index |
| Linked List | Insert at head/position, Delete, Search |
| Binary Search Tree | Insert, Delete, Search |
| Graph | BFS Traversal, DFS Traversal |
Home Page
Array Visualizer
Linked List Visualizer
Binary Search Tree (BST) Visualizer
Graph Visualizer
Since this is a pure frontend project with no backend, the entire application runs in the browser. Each visualizer page operates independently with its own JavaScript module.
Browser
│
├── index.html ← Landing page, navigation hub
│
├── array.html / array-visualizer.js
│ ├── Renders array blocks with index labels
│ ├── Manages create / insert / delete step queues
│ └── Drives pseudocode highlight and log updates
│
├── linked-list.html / linked-list-visualizer.js
│ ├── Renders node boxes connected by pointer arrows
│ └── Animates head/tail insert, delete, traverse
│
├── bst.html / bst-visualizer.js
│ ├── Draws tree nodes on an SVG canvas with edge lines
│ └── Animates insert and search with comparisons highlighted
│
├── graph.html / graph-visualizer.js
│ ├── Renders adjacency-based node graph on canvas
│ └── Runs BFS and DFS with visited state coloring
│
└── css/styles.css ← Shared dark theme, animations, layout
Data-Structures-Visualizer/
├── index.html # Landing page with navigation cards
├── array.html # Array visualizer page
├── linked-list.html # Linked list visualizer page
├── bst.html # Binary search tree visualizer page
├── graph.html # Graph visualizer page
├── css/
│ └── styles.css # Shared stylesheet for all pages
├── js/
│ ├── array-visualizer.js # Array logic and animation engine
│ ├── linked-list-visualizer.js
│ ├── bst-visualizer.js
│ └── graph-visualizer.js
└── assets/
└── favicon.svg
- HTML5 — Page structure and semantic markup
- CSS3 — Dark theme, transitions, keyframe animations, responsive layout
- JavaScript (ES6 modules) — Algorithm logic, DOM manipulation, animation step queues
No external libraries. No package manager. No build tools.
Since the project has no server or build dependencies, setup is a single step.
Clone the repository
git clone https://github.com/devanshibhatt23/Data-Structures-Visualizer.gitOpen in browser
cd Data-Structures-Visualizer
open index.htmlOr simply double-click index.html in your file explorer. The application runs entirely in the browser.