Graph Visualizer

Fast Animation

Graph: 5 nodes, 6 edges (Undirected)

Graph Structure

Adjacency Matrix

	0	1	2	3	4
0	0	1	1	0	0
1	1	0	0	1	1
2	1	0	0	1	0
3	0	1	1	0	1
4	0	1	0	1	0

Logs

No operations yet

Notes

A graph is a collection of nodes (vertices) and edges connecting them.

Add Node: Click empty space to create a new node.

Add/Remove Edge: Select two nodes to connect/disconnect them.

BFS: Breadth-First Search explores neighbors level by level.

DFS: Depth-First Search goes as deep as possible before backtracking.

Blue highlighting shows traversal progress and order.

Toggle between directed and undirected graphs.

Adjacency matrix shows connection relationships.

Implementation (TypeScript)

class Graph {
  private adjacencyList: Map<number, number[]> = new Map();
  
  addNode(id: number) {
    if (!this.adjacencyList.has(id)) {
      this.adjacencyList.set(id, []);
    }
  }
  
  addEdge(from: number, to: number) {
    this.adjacencyList.get(from)?.push(to);
    // For undirected graph:
    // this.adjacencyList.get(to)?.push(from);
  }
  
  bfs(start: number): number[] {
    const visited = new Set<number>();
    const queue = [start];
    const result = [];
    
    while (queue.length > 0) {
      const node = queue.shift()!;
      if (visited.has(node)) continue;
      
      visited.add(node);
      result.push(node);
      
      const neighbors = this.adjacencyList.get(node) || [];
      queue.push(...neighbors.filter(n => !visited.has(n)));
    }
    
    return result;
  }
  
  dfs(start: number, visited = new Set()): number[] {
    visited.add(start);
    const result = [start];
    
    const neighbors = this.adjacencyList.get(start) || [];
    for (const neighbor of neighbors) {
      if (!visited.has(neighbor)) {
        result.push(...this.dfs(neighbor, visited));
      }
    }
    
    return result;
  }
}

About Graphs

A graph is a mathematical structure consisting of vertices (nodes) and edges that connect pairs of vertices.

Types:

Directed: edges have direction (arrows)
Undirected: edges are bidirectional
Weighted: edges have associated weights

Applications:

Social networks, road maps
Computer networks
Dependency graphs
State machines

Traversal Complexity:
BFS & DFS: O(V + E) time, O(V) space