A modern, interactive web application for visualizing and learning fundamental data structures. Perfect for students, educators, and anyone looking to understand how Arrays, Linked Lists, Stacks, and Queues work under the hood.
- Interactive Data Structure Visualizations - Watch how data structures behave in real-time
- Arrays - Explore contiguous memory, O(1) random access, and fixed-size constraints
- Linked Lists - Understand pointer-based structures with dynamic sizing
- Stacks (LIFO) - Visualize Last-In-First-Out operations like a stack of plates
- Queues (FIFO) - See First-In-First-Out behavior like a checkout line
- Animated Operations - Smooth animations for Add, Remove, Push, Pop, Peek, Enqueue, and Dequeue
- Java Code Examples - Toggle to view actual Java implementations for each structure
- Time & Space Complexity Table - Compare performance characteristics across all data structures
- Educational Comparisons - Quick reference guide for when to use each data structure
- Node.js (v16 or higher)
- npm or yarn
- Clone the repository
git clone <repository-url>
cd dsa-visualizer- Install dependencies
npm install- Start the development server
npm run dev- Open in browser
http://localhost:5173
- Enter an element name and click Add to insert it into the array (max 8 elements)
- Click on any element to highlight it (demonstrates O(1) access time)
- Click the trash icon to remove an element
- Press Enter as a shortcut to add elements
- Enter a value and click Add Node to append it to the list
- Each node displays its position and points to the next node
- Remove nodes by clicking the trash icon
- Visual "HEAD" and "NULL" pointers show the list structure
- Enter a value and click Push to add to the top of the stack
- Click Pop to remove the top element
- Click Peek to highlight the top without removing
- Animations show the LIFO (Last-In-First-Out) principle in action
- Enter a value and click Enqueue to add to the rear
- Click Dequeue to remove from the front
- Click Peek to view the front element
- Visual indicators show the FIFO (First-In-First-Out) flow
- Click Show Java Code button to view actual Java implementations
- Toggle between tabs to see different code examples
- Useful for understanding real-world usage patterns
- React 18 - UI library for building interactive components
- Vite - Fast build tool and dev server
- Tailwind CSS - Utility-first CSS framework for styling
- Lucide React - Beautiful, consistent icon library
- JavaScript ES6+ - Modern JavaScript features
dsa-visualizer/
├── src/
│ ├── components/
│ │ └── DataStructuresVisualizer.jsx # Main visualizer component
│ ├── App.jsx # App wrapper
│ ├── main.jsx # React entry point
│ └── index.css # Tailwind directives
├── index.html # HTML template
├── vite.config.js # Vite configuration
├── tailwind.config.js # Tailwind configuration
├── postcss.config.js # PostCSS configuration
├── package.json # Dependencies
└── README.md # This file
| Structure | Access | Search | Insert | Delete | Space | Best For |
|---|---|---|---|---|---|---|
| Array | O(1) | O(n) | O(n) | O(n) | O(n) | Fast random access |
| Linked List | O(n) | O(n) | O(1) | O(1) | O(n) | Dynamic sizing, frequent insertions |
| Stack | O(n) | O(n) | O(1) | O(1) | O(n) | Undo operations, backtracking |
| Queue | O(n) | O(n) | O(1) | O(1) | O(n) | Task scheduling, BFS |
After using this visualizer, you'll understand:
- ✅ How data is stored in memory for different structures
- ✅ Time complexity implications of each operation
- ✅ When to use each data structure for optimal performance
- ✅ Real-world applications and use cases
- ✅ How to implement operations in Java
- O(1) - Constant Time ⚡ Best! Same time regardless of input size
- O(n) - Linear Time 📈 Time grows proportionally with input size
- O(n) - Linear Space 💾 Memory usage grows with the number of elements
To create an optimized production build:
npm run buildThis generates a dist folder with optimized assets ready for deployment.
You can easily customize:
- Colors: Modify Tailwind classes in the component
- Data Structure: Update initial state values
- Code Examples: Edit the
codeExamplesobject for different languages - Animations: Adjust transition timings in the component
The visualizer includes code examples for each data structure. Currently featuring:
- Arrays - Declaration, initialization, and access
- Linked Lists - Node-based insertion and traversal
- Stacks - Push/Pop/Peek operations
- Queues - Enqueue/Dequeue operations
Examples are in Java, but concepts apply to all programming languages.
Contributions are welcome! Feel free to:
- Report bugs
- Suggest new features
- Improve documentation
- Add more data structures (Trees, Graphs, Hash Tables, etc.)
- Optimize animations
This project is open source and available under the MIT License.
- Start with Arrays - The simplest structure to understand
- Experiment with Operations - Try adding/removing elements to see real-time changes
- Watch Animations - Animations show exactly what happens during operations
- Compare Complexities - Use the table to understand performance trade-offs
- Study the Code - Toggle Java examples to see implementation details
- Add Tree visualization
- Add Graph visualization
- Add Hash Table implementation
- Support for multiple programming languages (Python, C++, etc.)
- Custom animation speed control
- Step-through mode for algorithmic operations
If you encounter any issues or have questions:
- Check the Issues section
- Review the code comments for detailed explanations
- Refer to the time complexity table for performance guidance
Built with React, Vite, and Tailwind CSS for a smooth learning experience.
Happy Learning! 🎓 Master data structures and level up your DSA skills! 📈