Depth and Breadth First Search Visualization

---

Table of Contents

1. Overview
2. Features
3. Technologies Used
4. Installation
5. Usage
6. Visuals
7. Future Enhancements

---

Overview

• 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.

---

Features

• 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)

---

Technologies Used

• Languages: JavaScript, HTML, CSS
• Libraries: vis.js

---

Installation

1. Clone the repository:

   git clone https://github.com/wfrautschy4/DBFS-Visualization.git

2. Navigate to the project directory

   cd DBFS-Visualization

3. Open index.html in your browser

Usage

1. Open file
2. Set the type of graph you want to generate
3. Set the node and edge count of your graph (if generated)
4. Adjust visualization settings like speed, auto-traversal, and navigating more than one node per step
5. Choose between breadth and depth first search to navigate the graph
6. Click the SEARCH button or press the Space bar to start searching
7. Reset to keep the graph and settings or Generate a new Graph to start new

Visuals

Future Enhancements

• 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?