An interactive web application that visualizes Breadth-First Search (BFS) and Depth-First Search (DFS) on graphs using smooth animations and a modern dark dashboard UI.
This project helps in understanding graph traversal algorithms through real-time visualization and user interaction.
- Add nodes dynamically
- Add edges between nodes
- Visualize BFS traversal
- Visualize DFS traversal
- Adjustable traversal speed
- Live traversal order display
- Reset graph functionality
- Modern dark UI
- Smooth animations and transitions
Frontend
- HTML5
- CSS3 (Grid, Flexbox, Advanced Styling)
- JavaScript (ES6)
Visualization
- HTML5 Canvas
Graph-Traversal-Visualizer/
│
├── index.html # Main UI structure
├── style.css # Styling and layout
├── script.js # Graph logic and animations
└── README.md # Project documentation
- Open the application in your browser.
- Add nodes using the input field.
- Add edges using the format: A B
- Click:
- Start BFS to visualize Breadth-First Search
- Start DFS to visualize Depth-First Search
- Adjust the traversal speed using the slider.
- View traversal order in real time.
- Use Reset Graph to clear the canvas.
- Uses a queue
- Traverses level by level
- Guarantees shortest path in unweighted graphs
- Uses recursion
- Explores one branch fully before backtracking
- Dark theme dashboard layout
- Glass-style panels
- Gradient buttons
- Responsive layout using CSS Grid
- Smooth hover and transition effects
Through this project, I practiced:
- Graph data structures
- BFS and DFS algorithms
- Canvas-based rendering
- Asynchronous animations in JavaScript
- Advanced CSS layout and styling
- UI/UX design principles
- Draggable nodes
- Queue visualization for BFS
- Stack visualization for DFS
- Directed graph support
- Save and load graphs
- Predefined example graphs
Clone the repository:
git clone https://github.com/SabhyataVerma/BFS-DFS-Visualization.git
Open:
index.html
No installation required.
Sabhyata Verma
This project is created for educational and portfolio purposes.