Skip to content

Program designed to visualize the traversal process of depth and breadth first search algorithms.

Notifications You must be signed in to change notification settings

wfrautschy4/Graph-Traversal-Visualization

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

24 Commits
 
 
 
 
 
 

Repository files navigation

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

alt text

alt text

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?

About

Program designed to visualize the traversal process of depth and breadth first search algorithms.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published