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

We used typescript, eslint, and prettier to set up our dev environment, which reduced a lot of the clutter that bigger javascript projects normally come with. The UI/UX (designed by John Lu) was done through Figma. The graph itself was simulated through a visualization library called Cytoscape.

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.

Built With

Share this project: