BFS spreads out
Breadth-first search uses a queue. It explores everything one step away, then everything two steps away, and so on.
Graph theory playground
See graph traversal as something you can test, not just memorise.
This prototype introduces graph search through vertices, edges and traversal algorithms. Change the graph yourself, then watch how breadth-first search and depth-first search behave.
The aim is to make discrete mathematics feel concrete: predict what will happen, run the algorithm, then adjust the network and try again.
View the search algorithms mapDFS goes deep
Depth-first search follows a path as far as it can before backtracking. It feels more like exploring a maze by choosing a corridor and committing to it.
The graph matters
Change one edge or the starting vertex and the same algorithm can behave differently. The point is to predict, test and then explain why.
Interactive prototype
Build a graph and step through a traversal
Add vertices, click two vertices to add or remove an edge, then choose a start vertex and compare how breadth-first and depth-first search explore the same graph.
Edges: 6
Vertices: 7
Selected: Choose a vertex
Visited: 1
Adjacency list
V1: V2, V3
V2: V1, V4, V5
V3: V1, V6
V4: V2
V5: V2
V6: V3, V7
V7: V6
Side-by-side comparison
Same graph, same start vertex, different search behaviour
Start: V1
Step 1 of 14
Breadth-first search
Explores in layers using a queue.
Put V1 into the queue. Breadth-first search always removes from the front, so it explores nearby vertices before going deeper.
Current: V1
Queue: V1
BFS order
V1V2V3V4V5V6V7
Depth-first search
Goes deep along one path before backtracking.
Start at V1. Depth-first search follows one path as far as it can before backtracking.
Current: V1
Path: V1
DFS order
V1V2V4V5V3V6V7
The first difference is at position 3: BFS visits V3, while DFS visits V4.
Joy in the process
The point is not just to finish. It is to notice, test and return.
These tools are invitations to explore. A good mistake, a surprising pattern or a question you cannot yet answer is part of the work, not a failure of it.
The challenge is deliberate: the site should support thinking, not remove the need for it.
Before changing a setting, pause and predict what you think will happen.
Change one thing at a time. What stayed the same, and what changed?
Try to create a surprising case, a broken case, or a beautiful pattern.
Ask what this connects to outside the page: maps, movement, nature, systems or decisions.
Reset, then try again with a new question in mind.
What comes next
Add shortest paths with Dijkstra's algorithm.
Add graph colouring and compare different colouring strategies.
Generate random graphs and watch connected components appear.
Turn traversal steps into classroom-friendly challenge questions.