GraphAV - A graph algorithms visualizer built using React and Typescript

Aim of the project

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