https://github.com/kubk/graph-traversing-visualization

Graph visual editor and BFS/DFS visualizer using Canvas
https://github.com/kubk/graph-traversing-visualization

canvas graph-algorithms graph-visualization typescript

Last synced: 10 days ago
JSON representation

Graph visual editor and BFS/DFS visualizer using Canvas

• Host: GitHub
• URL: https://github.com/kubk/graph-traversing-visualization
• Owner: kubk
• Created: 2017-01-09T12:15:19.000Z (almost 8 years ago)
• Default Branch: master
• Last Pushed: 2022-12-06T20:37:05.000Z (almost 2 years ago)
• Last Synced: 2024-10-14T09:22:46.297Z (24 days ago)
• Topics: canvas, graph-algorithms, graph-visualization, typescript
• Language: JavaScript
• Homepage: https://kubk.github.io/graph-traversing-visualization/dist/
• Size: 4.84 MB
• Stars: 4
• Watchers: 1
• Forks: 0
• Open Issues: 24
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# kubk/graph-traversing-visualization [![Build Status](https://travis-ci.org/kubk/graph-traversing-visualization.svg?branch=gh-pages)](https://travis-ci.org/kubk/graph-traversing-visualization)

Graph manipulation/traversing visualization using vanilla JavaScript + Canvas API.

## Features

- Draggable vertices

- Directed (one-way)/Undirected (two-way)/Parallel edges

- Dynamic building of [adjacency matrix](https://en.wikipedia.org/wiki/Adjacency_matrix), [incidence matrix](https://en.wikipedia.org/wiki/Incidence_matrix), [adjacency list](https://en.wikipedia.org/wiki/Adjacency_list)

- Deleting vertices (with all connected edges)

- Depth/Breadth-first search visualization

## Demo

Check out demo in your browser:

- [Depth/Breadth-first search visualization](https://kubk.github.io/graph-traversing-visualization/dist)

## Control

- Create vertex - Left mouse click on an empty space

- Drag vertex - Press and hold down left mouse button, then move drag vertex to the desired location

- Connect vertices - Right mouse click on start/end vertex

- Delete vertex - Ctrl+right mouse click

- Set vertex as selected (for specifying start vertex of search algorithms) - Ctrl+left mouse click

## Example

![example](https://github.com/kubk/graph-traversing-visualization/blob/gh-pages/out.gif)

## Testing

```

npm run test

```