https://github.com/joexbayer/graph-visualizer

Graphs with pathfinding
https://github.com/joexbayer/graph-visualizer

Last synced: 8 days ago
JSON representation

Graphs with pathfinding

• Host: GitHub
• URL: https://github.com/joexbayer/graph-visualizer
• Owner: joexbayer
• Created: 2020-02-09T11:54:06.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2020-10-17T21:28:28.000Z (about 4 years ago)
• Last Synced: 2023-08-09T21:28:46.058Z (about 1 year ago)
• Language: JavaScript
• Homepage:
• Size: 4.18 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Graph-Visualizer

Graph Visualizer with pathfinding.

Working Demo: Click here!

A Javascript based graph visualizer and pathfinding.

 ![alt text](https://github.com/joexbayer/Graph-Visualizer/blob/master/src/Menu.png?raw=true)

Nodes: 


Create nodes by clicking on the screen, connect the nodes by clicking on a existing node and 

then the next. Both directed and undircted edges can be created.

If you enable autoconnect nodes within a certain radius will created edges.

Edges are used for Pathfinding and have small "bots" that will go from node to node.

They can be turned off.

Nodes will be marked with "Node X" based on when they where created.

 ![alt text](https://github.com/joexbayer/Graph-Visualizer/blob/master/src/Graph.png?raw=true)

 

Color Mode update: Give nodes custom colors!

 ![alt text](https://github.com/joexbayer/Graph-Visualizer/blob/master/src/ColorMode.png?raw=true)

 

Pathfinding: 


When "Find Path" option is activated, the user can click two nodes and the shortest path will be found

using the A* algorithm

The algorithm uses the edges to find the shortest path. When activating the "Save Paths" option, you can

click multiple nodes to connect them and find the shortest path. Note, you cant unselect a node! To reset paths

either deactivate "Find Paths" or "Save Paths.

Options:



  
Press R to undo last node or edge created.

  
Options that are RED are turned off.

  
To connect nodes simply click on a node then the next.

  
The base case will be a undirected edge, to create a directed edge click the option in the menu.

  
"Autoconnect" will connect nodes that are close to each other.

  
Bots will move with the edges, click "Hide Bots" to hide them.

  
"Random Graph" will create a random graph based on input at the bottom.

  
To find the shortest path between to nodes press the "Find Path" button.

  
If you want to connect multiple nodes click the "Save Paths" button.