- What: This Project's goal is to visualize the node-traversing of graph searching methods such as Depth and Breadth first on a step-by-step controlled basis. The program also allows for control over graphs and displays info about the generated graphs
- Why: It exists to try to explain a not-so-easy to understand topic in a easier way to understand. It also allows for experimentation and exploring at your own pace to fully understand the concept in an interactive way.
- How: The program uses vis.js to visualize the nodes and utilizes algorithms like Breadth and Depth first search to navigate and discover underlying features of the graph.
- Real-time Graph Traversal visualization.
- Visualization Highlights Nodes in controlled steps
- Options for Custom and generated Graphs of certain types
- Control over Speed of Traversal
- Statistics which hold data about the graphs are displayed
- Ability to change graph navigation methods - (Breadth and Depth Supported / Djikstr and A* Soon)
- Languages: JavaScript, HTML, CSS
- Libraries: vis.js
- Clone the repository:
git clone https://github.com/wfrautschy4/DBFS-Visualization.git
- Navigate to the project directory
cd DBFS-Visualization
- Open
index.html
in your browser
- Open file
- Set the type of graph you want to generate
- Set the node and edge count of your graph (if generated)
- Adjust visualization settings like speed, auto-traversal, and navigating more than one node per step
- Choose between breadth and depth first search to navigate the graph
- Click the SEARCH button or press the Space bar to start searching
- Reset to keep the graph and settings or Generate a new Graph to start new
- Add more types of graphs for generation
- Allow custom graph imports through a json file
- Implement other searching algorithms like dijkstra and A*
- Find new graph visualization to support larger graphs?