-
-
Homepage
-
Graph of topics ranked from most common (1) to least common (8)
-
When a specific topic is hovered over they can see estimated study time, how much the topic appears on the exam, along with a description
Inspiration
As students, we often struggle with managing our study time effectively, especially when preparing for exams. We decided to create a tool that would help visualize exam topics and their relative importance, making it easier to prioritize studying material that will actually appear on the test, and to allocate our study time more efficiently. We were inspired by the idea of using interactive data visualization to simplify complex information and make it more accessible.
What it does
StudyGrapher is an interactive web application that visualizes exam topics. Each node on the page represents a topic, with the size of the node proportional to the recommended study time. The topics within each node are ranked based on their relative importance in the exam, with 1 being most important and common on the test. Users can hover over a node to view detailed information about the topic, including its description, exam percentage, and study time. The graph is interactive, allowing users to drag nodes around.
How we built it
We built StudyGrapher using a combination of web technologies. The frontend was developed using HTML, CSS, and JavaScript, using the D3.js library for creating the interactive graph. We used Bootstrap for responsive design and styling. The backend was implemented using Node.js, which reads the exam topics data from a CSV file generated by the Claude API and serves it to the frontend. We used Git for version control and collaborated using GitHub.
Challenges we ran into
One of the main challenges we faced was organizing the exam topics data in a format that could be easily visualized using D3.js. We had to prompt engineer the Claude model to ensure that the CSV files we received were uniform in terms of formatting, and that the data was structured correctly for the graph layout. Another challenge was optimizing the performance of the graph, especially when dealing with a large number of nodes. Another challenge was the token cost, as we had to downgrade from the Claude 3 Opus model to the Claude 3 Haiku because we are broke.
Accomplishments that we're proud of
We are proud of creating a functional and visually appealing tool that addresses a real problem faced by students. StudyGrapher effectively visualizes exam topics and provides an intuitive way to prioritize study time. We successfully integrated various web technologies and libraries to create a seamless user experience. Despite the time constraints we were able to deliver a working prototype that demonstrates potential of data visualization in the education domain.
What we learned
Throughout the development of StudyGrapher, we gained valuable experience in working with D3.js for creating interactive data visualizations. We learned how to structure and manipulate data to create meaningful representations, as well as learning how to prompt engineer to get the results we wanted from the Claude model. Additionally, we learned that effective collaboration and communication with each other is very important.
What's next for StudyGrapher
We see many potential future enhancements for StudyGrapher. We plan to provide more data to the user, such as providing study material for each topic, as we would like to integrate machine learning algorithms to provide personalized study recommendations based on user preferences and performance. Furthermore, we would like to make the graph directed, and have related topics point to one another.
Log in or sign up for Devpost to join the conversation.