An interactive tool for visualizing graph algorithms in real time. Add nodes and edges, then watch BFS, DFS, Kruskal's, and Dijkstra's algorithms execute step-by-step — with the ability to modify the graph while algorithms are running.
🔗 Live demo: https://kish-00.github.io/graph-theory_visualizer/
- Interactive Graph Editor — Click to add nodes, drag to connect edges
- BFS Visualization — Breadth-First Search traversal with color-coded exploration
- DFS Visualization — Depth-First Search traversal with backtracking display
- Kruskal's Algorithm — Minimum spanning tree construction in real time
- Dijkstra's Algorithm — Shortest path finding with distance propagation
- Live Updates — Graph modifications are reflected in running algorithms immediately
- Step Control — Pause, resume, and step through executions
| Algorithm | Type | Description |
|---|---|---|
| BFS | Traversal | Explores neighbors level by level using a queue |
| DFS | Traversal | Explores as deep as possible using a stack (recursive) |
| Kruskal's | MST | Builds minimum spanning tree by sorting edges by weight |
| Dijkstra's | Shortest Path | Finds shortest paths from source using priority queue |
| Layer | Technology |
|---|---|
| Language | TypeScript (strict mode) |
| Rendering | p5.js (Processing canvas library) |
| Bundling | TypeScript compiler (tsc) |
| Hosting | GitHub Pages |
git clone https://github.com/kish-00/graph-theory_visualizer.git
cd graph-theory_visualizer
# Install TypeScript
npm install -g typescript
# Compile
tsc
# Open index.html in browser (or serve with any HTTP server)
python -m http.server 8000
# Open http://localhost:8000- Add a node — Click on empty canvas space
- Add an edge — Click the first node, then click the second node (edge weight prompted)
- Select an algorithm — Use the panel to choose BFS, DFS, Kruskal, or Dijkstra
- Run — Click play and watch the algorithm execute
- Interact — Add/remove nodes and edges while the algorithm is running
Built to demonstrate:
- Understanding of fundamental graph algorithms
- Real-time visualization and state management
- Interactive UI with canvas rendering
- TypeScript for type-safe algorithmic code
MIT