A live demo of our application can be found here.
Graph algorithms can be challenging to understand for the average CS student. Visualizing it on the whiteboard often hurts more than it helps, and the specific example videos on youtube sometimes aren't enough. The goal of this project was to create an all-in-one website that a student can access to reference algorithms they are confused about.
What it does
The web app we created allows the user to create a graph of their choosing. Once they have done so, they can toggle over to the algorithms tab to simulate an algorithm on their graph, or gain information about their graph. Currently, the following are available to the users:
- An iterative simulation of DFS, BFS
- A list of the cut vertices of the graph (found with hopcroft-tarjan's biconnected components algorithm)
- A minimum spanning tree of the graph (found with kruskal's algorithm)
How we built it
Challenges we ran into
Since this was a hackathon, we tried to code things out as quickly as possible. This turned out to be an issue, however, since our code quickly became cluttered and difficult to read. States were beginning to interweave between components, and connecting UI to actual graph functions was proving to be a difficult task. It was also difficult figuring out how to extract data from the cytoscape graph, since we were not used to the library.
Accomplishments that we're proud of
The BFS/DFS simulation in particular is very cool! It's a very intuitive visualization of what is happening. The cut vertices are also very cool to look at.
What we learned
In this project, we learned how to create a semi-stable, professional-ish typescript project that can somewhat maintain itself. Eslint and prettier took care of many trivial errors we would have had to deal with, and the unified code style made it really easy for both of us to understand each other's code. We also gained a deeper understanding of how react hooks works through this.
What's next for Graph Visualizer
Adding more algorithms in an iterative version is the next logical step for us, since we wanted to focus on showing how graph algorithms operate. Aside from that, exploring better UX for creating graphs would be a really nice improvement.