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)

16 Libraries You Should Know as a React Developer

Being a modern React developer is not about knowing just React itself. To stay competitive, it is highly recommended to explore the whole ecosystem. This article contains some of the most useful React component libraries to speed up your developer workflow.