📊 Data Structure Visualizer

An interactive web-based tool to visualize and learn fundamental data structures through animations and hands-on operations.

🌟 Features

• Interactive Visualizations: See data structures in action with real-time visual feedback
• Multiple Data Structures: Comprehensive coverage of fundamental data structures
• User-Friendly Interface: Clean, intuitive design with easy-to-use controls
• Educational Tool: Perfect for students learning data structures and algorithms
• No Dependencies: Pure HTML, CSS, and JavaScript - no frameworks required
• Responsive Design: Works on desktop and mobile devices

📚 Included Data Structures

1. Queue (FIFO - First In First Out)

• Enqueue: Add elements to the rear
• Dequeue: Remove elements from the front
• Peek: View the front element without removing it
• Visual representation of queue overflow and underflow

2. Stack (LIFO - Last In First Out)

• Push: Add elements to the top
• Pop: Remove elements from the top
• Peek: View the top element
• Visual demonstration of stack operations

3. Array (Linear Data Structure)

• Fixed-size collection
• Index-based access
• Insert and delete operations
• Visual representation of array elements

4. ArrayList (Dynamic Array)

• Dynamic resizing capability
• Add and remove operations
• Automatic capacity management
• Visualize array growth

5. Linked List (Linear Data Structure)

• Singly linked list implementation
• Insert at beginning, end, or specific position
• Delete operations
• Visual representation of node connections

6. Max Heap (Priority Queue)

• Parent node larger than children
• Heapify operations
• Extract maximum element
• Visual tree representation

7. Min Heap (Priority Queue)

• Parent node smaller than children
• Heapify operations
• Extract minimum element
• Visual tree representation

🚀 Getting Started

Installation

1. Clone the repository

   git clone https://github.com/lil-hassan/dsa-visualizer.git

2. Navigate to the project directory

   cd dsa-visualizer

3. Open in browser

   • Simply open index.html in your web browser

💻 Usage

1. Launch the Application: Open index.html in your browser
2. Select a Data Structure: Click on any data structure card from the home page
3. Perform Operations:
   • Use the input field to enter values
   • Click operation buttons (Enqueue, Push, Insert, etc.)
   • Set size constraints where applicable
   • View real-time visual updates

Keyboard Shortcuts

• Enter: Quick submit/add operation
• Delete: Quick remove operation (on applicable structures)

📸 Screenshots

Home Page

Queue Visualizer

Stack Operations

🎯 Use Cases

• Students: Learn data structures through interactive visualization Self-Learning: Explore data structures

🛠️ Project Structure

dsa-visualizer/
├── index.html              # Main landing page
├── home-style.css          # Global styles
├── home-script.js          # Navigation logic
├── assets/                 # Images and icons
│   ├── queue.png
│   ├── stack.png
│   ├── array.png
│   └── ...
├── queue/                  
├── stack/                  
├── array/                  
├── arraylist/              
├── linkedlist/             
├── max-heap/               
├── min-heap/               
└── README.md

🌐 Live Demo

(https://dsa-visuallizer.netlify.app/)