Back to Projects
ActiveLLM Project

Graph Playground

Build custom node topologies, connect weighted edges, and run BFS search or Dijkstra shortest pathfinding step animations.

GitHub RepositoryLive Demo
Target Learning Outcome

Construct and analyze adjacency networks, traversal orderings, and shortest path relaxations.

Active Lab TerminalRUNNING LIVE
Coordinate Node Network
425312ABCDE
Node ID
Src
Dest
Wt
Pathfinding Simulations
Execution trace
Graph initialized. Node A is root.
01. Problem it solves

Complex Adjacency Computations

Graphs are highly abstract and mathematically dense structure types. Developers often struggle to understand how edge relaxation works, how BFS expands outward layer-by-layer, or how Dijkstra maintains optimal distances across nodes in real-world map pipelines.

This playground solves this by allowing users to draw custom nodes and visually trace path relaxations directly on the canvas.

02. Concept it teaches

Network Adjacency and Relaxations

This sandbox teaches core graph concepts:

  • Vertices (Nodes) and Edge connections (Adjacency)
  • Weighted vs. Unweighted networks
  • Breadth First Search (BFS) adjacent discoveries
  • Dijkstra's shortest path relaxation steps
  • Priority queue distance estimations
03. What I built

Interactive SVG Graph Builder

A dynamic graph canvas visualizer featuring:

  • •Interactive SVG network canvas plotting nodes and weighted edges.
  • •Custom Spawn Node tools mapping coordinate circles dynamically.
  • •Edge Connector inputs configuring source, target, and weight values.
  • •BFS adjacent search animation with edge highlight indicators.
  • •Dijkstra Shortest Path relaxation animation displaying path cost updates.
04. Architecture

Graph State Updates

Vertices & Edges lists state
Dijkstra distance relaxation tracker
Pathfinder highlights output
05. Tech Stack

Built With

React 19TypeScriptTailwind CSSSVG CoordinatesGitHub
06 & 07. Links

Source & Deploy

GitHub Repository:landing
Live Lab Endpoint:/labs/graph-playground
08. Interview Explanation

Defending the Design

Interview Defense Strategy

I designed the Graph Playground to visualize coordinate expansions and relaxation steps. Watching edges highlight as Dijkstra's algorithm selects the minimum distance node gives developers an immediate understanding of greedy pathfinding algorithms.
09. Future Improvements

Roadmap Extensions

  • Add Prim's Minimum Spanning Tree visualizer.
  • Implement topological sorting for directed acyclic graphs (DAG).
  • Include draggable nodes to update coordinates in real time.