DSA Visualizer

An interactive web-based educational platform for learning Data Structures and Sorting Algorithms through visual representations. This project provides beginner-friendly visualizations to help understand how different data structures and sorting algorithms work.

---

Features

• Interactive Visualizations: Step-by-step visual representations of algorithms
• Multiple Data Structures: Linear and non-linear data structures
• Sorting Algorithms: Visualize how different sorting techniques work
• User-Friendly Interface: Intuitive UI with smooth animations
• Educational Focus: Perfect for students learning DSA
• Fully Web-Based: No installation required, runs in any modern browser

---

Project Structure

DSA_visualizer/
├── index.html                          # Main landing page
├── README.md                           # Project documentation
├── DataStructures/                     # Data structure visualizations
│   ├── index.html                      # DS navigation hub
│   ├── linearDataStructure/            # Linear DS section
│   │   ├── indexLinear.html
│   │   ├── LinkedList-main/            # Linked List visualization
│   │   │   ├── linkedListIndex.html
│   │   │   ├── style.css
│   │   │   ├── ui.css
│   │   │   └── js/
│   │   │       ├── canvas.js
│   │   │       ├── linkedList.js
│   │   │       ├── script.js
│   │   │       └── ui.js
│   │   ├── Queue/                      # Queue implementations
│   │   │   ├── queueIndex.html
│   │   │   ├── queueUsingArray/
│   │   │   │   ├── queueIndex.html
│   │   │   │   ├── script.js
│   │   │   │   └── styles.css
│   │   │   └── queueUsingLinkedList/
│   │   │       ├── queueIndex.html
│   │   │       ├── script.js
│   │   │       └── styles.css
│   │   └── Stack/                      # Stack implementations
│   │       ├── stackIndex.html
│   │       ├── stackUsingArray/
│   │       │   ├── stackIndex.html
│   │       │   ├── script.js
│   │       │   └── style.css
│   │       └── stackUsingLinkedList/
│   │           ├── stackIndex.html
│   │           ├── script.js
│   │           └── styles.css
│   └── non-linearDataStructure/        # Non-linear DS section
│       ├── indexNonLinear.html
│       ├── AVL/                        # AVL Tree visualization
│       │   ├── avl.html
│       │   ├── script.js
│       │   └── style.css
│       ├── BST Tree/                   # Binary Search Tree
│       │   ├── binarySearchTree.html
│       │   ├── BinarySearchTree.js
│       │   ├── BinarySearchTreeNode.js
│       │   ├── main.js
│       │   ├── styles.css
│       │   └── treeVisualizer.js
│       └── Graph/                      # Graph visualization
│           ├── index.html
│           ├── script.js
│           └── styles.css
└── SORTING/                            # Sorting algorithm visualizations
    ├── index.html                      # Sorting hub
    ├── bubble.html                     # Bubble Sort
    ├── insertion.html                  # Insertion Sort
    ├── selection.html                  # Selection Sort
    ├── mergesort.html                  # Merge Sort
    ├── heapsort.html                   # Heap Sort
    └── navigationStyles.css

---

Data Structures Covered

Linear Data Structures

1. Linked List

   • Visual representation of linked list nodes
   • Insert, delete, and traversal operations
   • Interactive canvas visualization

2. Stack

   • Array-based implementation
   • Linked list-based implementation
   • Push, pop, and peek operations

3. Queue

   • Array-based implementation
   • Linked list-based implementation
   • Enqueue and dequeue operations

Non-Linear Data Structures

1. Binary Search Tree (BST)

   • Tree insertion visualization
   • Search operations
   • Tree traversal (In-order, Pre-order, Post-order)
   • Interactive tree building

2. AVL Tree

   • Self-balancing binary search tree
   • Rotation animations
   • Insertion with automatic balancing

3. Graph

   • Graph visualization
   • Node and edge representation
   • Interactive graph building

---

Sorting Algorithms Covered

1. Bubble Sort - Simple comparison-based sorting
2. Selection Sort - Selection-based sorting algorithm
3. Insertion Sort - Incremental sorting approach
4. Merge Sort - Divide and conquer algorithm
5. Heap Sort - Heap-based sorting technique

---

Getting Started

Prerequisites

• Modern web browser (Chrome, Firefox, Safari, Edge)
• No installation or dependencies required

How to Use

1. Open the main page:

   • Open index.html in your web browser

2. Navigate to Data Structures:

   • Click on "Data Structures" to explore linear and non-linear structures
   • Choose from Linear or Non-Linear sections
   • Select the data structure you want to visualize

3. Navigate to Sorting Algorithms:

   • Click on "Sorting Algorithms" from the main page
   • Select any sorting algorithm to see it in action
   • Use controls to step through the sorting process

4. Interact with Visualizations:

   • Use input fields to add/remove elements
   • Use buttons for different operations
   • Watch the canvas animation to understand the process
   • Use step controls to go through the algorithm at your own pace

---

Technologies Used

• HTML5 - Markup structure
• CSS3 - Styling and animations
• JavaScript (Vanilla) - Algorithm implementation and interactivity
• HTML5 Canvas - Visualization rendering

---

How It Works

Each visualization includes:

• Interactive Controls: Input fields and buttons for user interaction
• Visual Representation: Canvas-based animations showing algorithm steps
• Information Display: Real-time information about the current state
• Navigation: Easy navigation between different data structures and algorithms

Example: Linked List Visualization

1. Enter values in the input field
2. Click "Insert" to add nodes to the visualization
3. Watch as nodes are added to the canvas
4. See connections between nodes
5. Delete nodes and watch the list update

---

Learning Benefits

• Visual Learning: See algorithms in action rather than just reading code
• Step-by-Step Execution: Control the pace of algorithm execution
• Multiple Implementations: Compare different implementations (e.g., Stack using Array vs Linked List)
• Interactive Practice: Hands-on experience with data structures

---

File Organization

All visualizations follow a consistent structure:

• *.html - User interface and HTML structure
• *.js - Algorithm implementation and interactivity
• *.css - Styling and animations

---

Navigation

• Main Page (index.html) - Entry point with two main sections
• Data Structures Hub (DataStructures/index.html) - Navigate to linear or non-linear structures
• Sorting Algorithms Hub (SORTING/index.html) - Choose sorting algorithm to visualize
• Individual Visualizations - Each algorithm has its own dedicated page

---

UI/UX Features

• Clean and intuitive interface
• Responsive design with smooth animations
• Color-coded visualizations for better understanding
• Interactive cards and navigation elements
• Hover effects for better user experience

---

Browser Compatibility

• ✅ Chrome/Chromium
• ✅ Firefox
• ✅ Safari
• ✅ Edge
• ✅ Mobile browsers (responsive design)

---

How to Extend

To add new data structures or sorting algorithms:

1. Create a new folder in the appropriate section
2. Add HTML file with UI elements
3. Implement JavaScript logic for the algorithm
4. Add CSS styling
5. Link it in the navigation (index.html files)
6. Update this README with the new addition

---

Contributing

Contributions are welcome! To contribute:

1. Fork the repository
2. Create a feature branch
3. Add your improvements
4. Test thoroughly in multiple browsers
5. Submit a pull request

---

Key Highlights

• Educational focus for DSA learners
• Fast and responsive visualizations
• Clear explanations through visual representations
• Pure JavaScript implementation (no framework dependencies)
• Works offline (no external dependencies except textures)

---

Quick Links

• Linked List: DataStructures/linearDataStructure/LinkedList-main/linkedListIndex.html
• Stack: DataStructures/linearDataStructure/Stack/stackIndex.html
• Queue: DataStructures/linearDataStructure/Queue/queueIndex.html
• Binary Search Tree: DataStructures/non-linearDataStructure/BST Tree/binarySearchTree.html
• AVL Tree: DataStructures/non-linearDataStructure/AVL/avl.html
• Graph: DataStructures/non-linearDataStructure/Graph/index.html
• Sorting: SORTING/index.html

---

Author

• Anoop Tripathi
• B.Tech in Artificial Intelligence and Data Science
• IIT Patna

Happy Learning! 🎉