Graphity

Graphity is a modern web interface for graph exploration that enables students and researchers to create, visualize, and analyze graph-like structures in an intuitive manner.

Comment

Inspiration

  1. Students often have difficulty understanding and visualizing graphs
  2. Graphs are difficult and time consuming to implement, whether that be in notes or programs

Our Goal

We want to create a user-friendly interface for students and developers alike to better learn about, create, and implement graphs in their programs. Our goal is a application that can be easily understood and customized by any user, not just programmers.

Our Product

Graphity is a web application focused on simplicity and user freedom. Our application features a user-friendly interface allowing for complete graph creation and customization. Users then have several options to explore, understand, and utilize the graph they have created.

Features

  1. Algorithm Visualization - Using our built-in code editor, users can create programs and run them on their own previously created graphs, helping to visualize graph traversals.
  2. User-Friendly Interface - With simplicity in mind, our app allows users to create and edit fully functional graphs with a drag and drop interface.
  3. Personal Graph Usage - After creating their graphs using our interface, users can download their personalized graphs as a JSON file for use in their own programs.

Technologies Used

Graphity is primarily written in TypeScript using the React.js library. The frontend is developed using HTML/CSS, Bootstrap, and Tailwind, while the backend uses TypeScript. The graph display functionality also uses the D3.js library.

Challenges

Working with React.js presented itself as our biggest challenge, as our group had either none or very limited experience with the library. It was also difficult to manage the visualization of the graphs and create the user interface.

Accomplishments

Our minimum viable product contains a fully functional and well-designed user interface that is accessible to programmers and non-programmers alike. The graph visualization also functions as expected, and probably took the most time to implement fully.

Lessons Learned

From this project, we learned to manage our ideas and make sure all members of the team know what parts to work on, which portions require the highest priority, and how to better search for and implement resources and plan ahead on which resources may improve the project the most. Aside from that, we all gained many technical skills as well working with web development, a field none of us had much experience in.

Future Plans

  1. Implement visualization for graph traversals, namely showing which nodes have been visited or not, or some other method to display which node is currently being processed.
  2. Extend compatibility with other languages beyond TypeScript, to allow users to test algorithms written in other languages, such as Python and C++.
  3. Extend to other data structures such as directed graphs.
  4. Include cloud-based sharing and storage to allow users to store their graphs for later use, as well as share graphs and code with other users.

Built With

Share this project:

Updates