DEV Community

Cover image for GraphAV - A graph algorithms visualizer built using React and Typescript
Karim Elghamry
Karim Elghamry

Posted on

GraphAV - A graph algorithms visualizer built using React and Typescript

Aim of the project

GraphAV Logo

GraphAV is an open source graph algorithms visualizer built πŸ’― from scratch using React and Typescript. It strives to facilitate the learning process of anyone who's struggling to grasp the concept of a certain graph algorithm. It can also be used as a tool by teachers to easily introduce a new algorithm to their students πŸ‘¨β€πŸŽ“πŸ‘©β€πŸŽ“.

links

website: https://karimelghamry.github.io/GraphAV/
Github repo: https://github.com/KarimElghamry/GraphAV

GraphAV does not include any UI dependencies in its code other than styled-components. πŸŽ‰πŸŽ‰

NOTE: touch screen support is yet to be implemented. Use a PC/Laptop for a better experience.

Show some ❀️ and ⭐ the repo to support the project 😁

Features

βœ”οΈ Light/Dark themes

βœ”οΈ Add, move and delete nodes

βœ”οΈ Directed/Undirected edges

βœ”οΈ Unweighted edges

βœ”οΈ Control visualization speed

βœ”οΈ Control canvas zoom percentage

βœ”οΈ Shortest paths and predecessor node information

βœ”οΈ Visited nodes/edges animations

🚧 Weighted edges (to be implemented)

🚧 Touch screen support (to be implemented)

🚧 Save/share graphs (to be implemented)

Available Algorithms

βœ”οΈ DFS - Depth First Search

βœ”οΈ DLS - Depth Limited Search

βœ”οΈ IDDFS - Iterative Deepening Depth First Search

βœ”οΈ BFS - Breadth First Search (with shortest paths calculations)

βœ”οΈ Dijkstra (with shortest paths calculations)

🚧 Bellman-Ford (to be implemented)

🚧 Floyd-Warshall (to be implemented)

🚧 A* (to be implemented)

🚧 Kosaraju (to be implemented)

🚧 Tarjan's Strongly Connected Components* (to be implemented)

Demo

Top comments (0)