BFS and DFS Algorithm Visualization

I'll create an interactive visualization that demonstrates how Breadth-First Search (BFS) and Depth-First Search (DFS) algorithms work on a graph.

How the BFS and DFS Simulation Works

This interactive visualization demonstrates how Breadth-First Search (BFS) and Depth-First Search (DFS) algorithms traverse a graph. Here's what you can do with it:

1. Create a Graph:

   • Click the "Add Node" button to add nodes to the canvas
   • Drag nodes to position them
   • Click on a node to start connecting it, then click on another node to create an edge
   • Use the "Load Example" button to create a pre-defined graph structure

2. Run the Algorithms:

   • Choose between BFS and DFS using the radio buttons
   • Click "Start Simulation" to begin the traversal
   • Use "Pause/Resume" to control the simulation
   • Use "Step" to advance one step at a time
   • Adjust the speed slider to control how fast the simulation runs

3. Understand the Visualization:

   • Nodes are color-coded to show their state:

     • Blue: Unvisited nodes
     • Purple: Visited nodes
     • Orange: Nodes in the queue (BFS) or stack (DFS)
     • Red: Current node being processed
   • Edges turn purple when they're part of the traversal path
   • The queue/stack display at the bottom shows the current state of the data structure

4. Algorithm Differences:

   • BFS uses a queue (First-In-First-Out) and explores all neighbors of a node before moving to the next level
   • DFS uses a stack (Last-In-First-Out) and explores as far as possible along each branch before backtracking

5. Reset and Clear:

   • Use "Reset" to restart the simulation with the same graph
   • Use "Clear Graph" to remove all nodes and edges

This visualization helps you understand how these fundamental graph traversal algorithms work and how they differ in their approach to exploring a graph structure.