🌐 Graph Traversal Visualizer An interactive web application that demonstrates Breadth-First Search (BFS) and Depth-First Search (DFS) algorithms with real-time visualization. Perfect for learning data structures and algorithms! Show Image Show Image Show Image Show Image Show Image 🎯 Features 🖥️ Interactive Web Interface
Real-time Graph Visualization with SVG graphics Step-by-step Algorithm Animation with customizable speed Interactive Node Selection - click nodes or use dropdown Live Data Structure Display - watch Queue/Stack contents change Algorithm Comparison with detailed information panels Responsive Design - works on desktop, tablet, and mobile
🧠 Educational Content
Visual Learning - see exactly how BFS and DFS work Algorithm Details - time/space complexity, use cases Data Structure Visualization - Queue (FIFO) vs Stack (LIFO) Step-by-step Traversal Order display Color-coded Node States for easy understanding
🔧 Technical Implementation
Pure JavaScript - no external dependencies (except Tailwind CSS) Object-Oriented Design with proper class structure Complete DSA Implementation - Queue, Stack, Graph classes Python Mirror Implementation for server-side learning Cross-browser Compatible with modern web standards
📁 Project Structure graph-traversal-visualizer/ ├── 📄 index.html # Main HTML structure ├── 🎨 styles.css # CSS styling and animations ├── ⚡ script.js # JavaScript logic and visualization ├── 🐍 graph_algorithms.py # Python DSA implementation └── 📖 README.md # This documentation file 🚀 Quick Start Option 1: Direct Browser Opening
Download all files to the same folder Double-click index.html to open in your browser Start exploring! - Click BFS or DFS to begin
Option 2: Local Server (Recommended) bash# Using Python python -m http.server 8000
npx serve .
php -S localhost:8000 Then open http://localhost:8000 in your browser. 🎮 How to Use Web Interface Controls ControlFunctionStart BFSBegin Breadth-First Search animationStart DFSBegin Depth-First Search animationReset GraphClear all states and restartSpeed SliderAdjust animation speed (Fast ↔ Slow)Start Node DropdownChoose starting node (A-G)Click NodesAlternative way to select start node Visual Legend ColorStateDescription🔵 GrayUnvisitedDefault state, not yet processed🔴 RedCurrentCurrently being processed (with pulse animation)🟡 YellowQueued/StackedAdded to data structure, awaiting processing🟢 GreenVisitedFully processed and completed Keyboard Shortcuts
B - Start BFS D - Start DFS R - Reset Graph
🧩 Algorithm Details Breadth-First Search (BFS) 📊 Data Structure: Queue (FIFO - First In, First Out) 🎯 Strategy: Explore all neighbors before going deeper ⏱️ Time Complexity: O(V + E) where V = vertices, E = edges 💾 Space Complexity: O(V) for queue and visited set ✅ Use Cases: Shortest path, level-order traversal, web crawling How it works:
Start at chosen node and add to queue While queue is not empty:
Remove node from front of queue (dequeue) Mark as visited Add all unvisited neighbors to back of queue
Process continues level by level
Depth-First Search (DFS) 📊 Data Structure: Stack (LIFO - Last In, First Out) 🎯 Strategy: Explore as deep as possible before backtracking ⏱️ Time Complexity: O(V + E) where V = vertices, E = edges 💾 Space Complexity: O(V) for stack and visited set ✅ Use Cases: Pathfinding, topological sorting, cycle detection How it works:
Start at chosen node and add to stack While stack is not empty:
Remove node from top of stack (pop) Mark as visited Add all unvisited neighbors to top of stack
Process explores one path completely before trying others
🔍 Understanding the Graph Graph Structure The visualization uses a 7-node undirected graph: B ── C /│ │ A │ F \│ /│ D ──E │ \ │ │ \G──/ Adjacency List Representation:
A(0): Connected to B(1), D(3) B(1): Connected to A(0), C(2), E(4) C(2): Connected to B(1), F(5) D(3): Connected to A(0), E(4), G(6) E(4): Connected to B(1), D(3), F(5), G(6) F(5): Connected to C(2), E(4) G(6): Connected to D(3), E(4)
💻 Python Implementation Running the Python Version bashpython graph_algorithms.py Python Features
Complete Graph Class with adjacency list BFS and DFS Implementations (iterative and recursive) Queue and Stack Classes built from scratch Algorithm Comparison with performance metrics Shortest Path Finding using BFS Console Visualization with emojis and formatting
Graph Structure: Nodes: Node(0, 'A') Node(1, 'B') ...
Adjacency List: A (0): B, D B (1): A, C, E ...
🔴 Node 0 is now current 🟡 Node 1 is now visiting 🟡 Node 3 is now visiting ... 🎓 Educational Value Computer Science Concepts Demonstrated
Graph Theory - vertices, edges, adjacency representation Data Structures - Queue, Stack, Set implementations Algorithm Design - iterative vs recursive approaches Time/Space Complexity - Big O notation analysis Web Development - DOM manipulation, SVG graphics, event handling Software Engineering - OOP design, separation of concerns
Learning Objectives
✅ Understand difference between BFS and DFS ✅ Visualize how data structures affect algorithm behavior ✅ Learn graph representation methods ✅ Practice algorithm implementation in multiple languages ✅ Develop intuition for choosing appropriate algorithms
🛠️ Technical Details Web Technologies Used
HTML5 - Semantic structure with SVG graphics CSS3 - Modern styling with animations and responsive design Vanilla JavaScript - ES6+ classes, async/await, modern APIs Tailwind CSS - Utility-first CSS framework (CDN) SVG - Scalable vector graphics for graph visualization
Browser Support
✅ Chrome 60+ ✅ Firefox 55+ ✅ Safari 12+ ✅ Edge 79+
File Sizes
index.html: ~4KB styles.css: ~3KB script.js: ~8KB graph_algorithms.py: ~12KB
🐛 Troubleshooting Common Issues
- Graph not displaying:
Check browser console for errors (F12) Ensure all files are in the same directory Verify file names match exactly: index.html, styles.css, script.js
- Animations not working:
Check if JavaScript is enabled Look for console errors Try refreshing the page (Ctrl+F5)
- Buttons not responding:
Open browser console and look for error messages Ensure files are served from a web server (not file:// protocol) Check if files were saved correctly
- Styling issues:
Verify Tailwind CSS is loading from CDN Check network connection Clear browser cache
Debug Mode Open browser console (F12) to see detailed logging: Loading Graph Traversal Visualizer... Initializing GraphVisualizer... Graph structure: {0: [1,3], 1: [0,2,4], ...} Graph visualization initialized! 🎨 Customization Changing Colors Edit styles.css to modify node colors: css.node.current { fill: #your-color !important; } Adding Nodes
Add node data to nodes array in script.js Add connections to edges array Update SVG dimensions if needed
Algorithm Modifications
Modify traversal order by changing neighbor sorting Add new algorithms by extending the GraphVisualizer class Create weighted graph version by adding edge weights
📚 Additional Resources Learn More About Graph Algorithms
Graph Theory Basics BFS vs DFS Comparison Algorithm Visualization
Web Development Resources
SVG Tutorial JavaScript Classes Async/Await Guide
🤝 Contributing Ways to Contribute
🐛 Report bugs or issues 💡 Suggest new features or algorithms 🎨 Improve UI/UX design 📝 Enhance documentation 🧪 Add test cases
Adding New Algorithms
Implement algorithm in Python first Add JavaScript visualization version Update UI with new controls Add algorithm info panel content Update documentation
Example: Adding Dijkstra's Algorithm javascriptasync dijkstraTraversal(startNode) { // Implementation here // Update UI with algorithm-specific info // Add distance/weight visualization } 📄 License This project is created for educational purposes. Feel free to:
✅ Use in classrooms and learning environments ✅ Modify and adapt for your needs ✅ Share with students and colleagues ✅ Build upon for your own projects
🙏 Acknowledgments
Inspiration: Classic computer science textbook visualizations Design: Modern web UI/UX patterns Algorithms: Fundamental graph theory concepts Community: Open source educational resources
📞 Support Getting Help
Check the troubleshooting section above Look at browser console for error messages Verify all files are present and correctly named Test with different browsers
Reporting Issues When reporting problems, please include:
Browser name and version Operating system Console error messages (if any) Steps to reproduce the issue
🎉 Happy Learning! This visualizer makes graph algorithms intuitive and fun to understand. Whether you're a student learning DSA or a teacher explaining concepts, this tool provides an engaging way to explore the fascinating world of graph traversal algorithms. Built with ❤️ for the computer science education community