IkkiOcean commented 4 days ago

Issue: Adding Interactive BFS Visualizer with User Input

Summary

I want to implement an interactive Breadth-First Search (BFS) visualizer that allows users to input a graph represented as an adjacency dictionary. The visualizer will display the graph and highlight the nodes in the order they are visited during the BFS traversal.

Features

User Input: Users can enter a graph in the form of an adjacency dictionary in JSON format.
Graph Visualization: The graph will be visually represented using D3.js, with nodes and edges rendered dynamically based on the user input.
Interactive BFS: Clicking on any node will initiate a BFS traversal from that node, highlighting the visited nodes sequentially.
Node Identification: Each node will be labeled with its ID to make it easier for users to identify nodes.

Requirements

Input Format:
- The input should be an adjacency dictionary in the following format:
```
{
  "0": [1, 2],
  "1": [0, 2],
  "2": [0, 1]
}
```
Graph Structure:
- Nodes should be represented as circles, and edges as lines connecting the nodes.
BFS Visualization:
- On clicking a node, the BFS traversal should be visualized with a delay between the highlighting of each node.
Reset Feature:
- Provide a way for users to re-enter graph data without refreshing the page.