A is 0 away from itself, and it is the only thing in the queue.
- Visited
- 0
- Edges seen
- 0
- In frontier
- 1
Queue(oldest first)
A0
- Expanding now
- In the frontier
- Finished
- The answer
- Untouched
03
const queue = [source];Ten graph algorithms stepped one edge at a time, on two drawings that each answer a different question: a node-link diagram with hand-placed nodes, weights and arrows, and a paintable grid where the shape of the explored region is the lesson — Dijkstra's expanding disc against A*'s narrow cone at the goal. Breadth-first and depth-first search, topological sort, cycle detection, Dijkstra, A*, Bellman–Ford with negative cycles, union–find, Kruskal and Prim. The diagram, the queue, the counters and the highlighted line of code are all read from one trace, so they never disagree.
A frontend app built by Ananda Rizki. More of them at Labs.
Graphviz
Visits everything one ring at a time using a queue. On equal-cost edges that makes the first arrival the shortest one, which is why the badges it hangs on the nodes are distances.
A is 0 away from itself, and it is the only thing in the queue.
const queue = [source];Simulator
Graph Algorithms Visualiser
Ten graph algorithms across three drawings, because a graph algorithm's lesson lives in a different picture depending on what it does: a node-link diagram for the traversals and the spanning trees, a paintable grid for pathfinding, and a parent-pointer forest for union–find, which is a picture of bookkeeping rather than of any graph. Node positions are authored by hand rather than produced by a force simulation, so every frame draws identical points and stepping backwards lands on a pixel-identical picture. The grid is where A* earns its keep and where it does not: it explores 103 cells against Dijkstra's 218 on the rooms maze for the same 24-step route, and 201 against 227 on a comb maze where the route doubles back and the heuristic is simply wrong. Kruskal draws the union–find forest underneath the graph, so accepting an edge and merging two trees read as one event, and it builds the same tree Prim does in a completely different order.
Built by Ananda Rizki, a frontend developer — one of the small web apps he writes for fun at Labs.
More like this