DSA Visualizer 📊

Welcome to DSA Visualizer! Learning complex data structures and algorithms from a textbook can be challenging. This project was built to bring those abstract concepts to life, allowing you to watch their operations step-by-step in real-time.

Whether you're a student preparing for an exam or a developer brushing up on core computer science fundamentals, this tool is designed to make learning intuitive and engaging.

🚀 Live Demo(NETLIFY)

Click here to interact with the live project!(NETLIFY)

🚀 Live Demo(GITHUB PAGES)

Click here to interact with the live project!(GITHUB PAGES)

---

✨ Features

This application provides a comprehensive suite of visualizations for the most common data structures and algorithms.

Sorting Algorithms

• Visualize Bubble, Selection, Insertion, Merge, Quick, and Counting Sort.
• Interactive controls for animation speed, array size, and real-time pause/resume functionality.

Searching Algorithms

• Step-by-step visualization of Linear Search and Binary Search.
• Clearly highlights the portion of the array being checked in each step.

🥞 Stack

• Visualize Push, Pop, and Peek operations.
• Includes a dynamic TOP pointer to track the head of the stack.
• Features a max-size setting to demonstrate Stack Overflow errors.

🚃 Queue

• Standard (FIFO) Queue: The classic first-in, first-out model.
• Circular Queue: A fixed-size queue that cleverly wraps around to reuse space.
• Priority Queue: A queue where elements are dequeued based on their value (priority).
• Deque: A double-ended queue where elements can be added/removed from both front and rear.

🔗 Linked List

• Singly & Doubly: Visualize nodes with "next" and "previous" pointers.
• Circular (Singly & Doubly): See how the tail node connects back to the head.
• Animate all key operations: insert/delete at the Head, Tail, or any Index.
• Dynamic HEAD and TAIL pointers provide clear visual tracking.

🌳 Binary Search Tree (BST)

• Animate Insert, Delete, and Search operations with clear traversal paths.
• Watch Traversal Animations live:
  • In-Order
  • Pre-Order
  • Post-Order
  • Breadth-First Search (BFS)

🧭 Graph

• Create Your Own Graph: Click on the canvas to add nodes and click between two nodes to create an edge.
• Weighted/Unweighted: Add custom weights to edges.
• Directed/Undirected: Toggle between graph types.
• Algorithm Animations:
  • Breadth-First Search (BFS)
  • Depth-First Search (DFS)
  • Dijkstra's Shortest Path Algorithm (highlights the cheapest path).

---

🛠️ Technology Stack

• Core Logic: Built entirely with Vanilla JavaScript (ES6+), demonstrating a solid understanding of DOM manipulation and state management without the aid of a framework.
• Structure & Style: Clean, semantic HTML5 and modern CSS3 (utilizing Flexbox and Grid for responsive layouts).
• Dynamic Graphics: Scalable Vector Graphics (SVG) are generated by JavaScript to dynamically draw the complex, non-linear connections for the Linked Lists, Trees, and Graphs.
• Deployment: Hosted on GitHub Pages.

---

🧠 Key Learning & Challenges

Building this project from scratch was a deep dive into both data structures and the fundamentals of web interactivity. Key takeaways include:

• Complex State Management: Managing the state of animations (e.g., isSorting, isPaused), user inputs, and the underlying data structures in pure JavaScript.
• Dynamic UI Rendering: Writing recursive functions to render the Binary Search Tree and calculating precise (x, y) coordinates for graph nodes and edges.
• Asynchronous JavaScript: Mastering async/await with a sleep() function to create clean, easy-to-read, step-by-step animations that don't block the browser.

---