One day, the summer after my sophomore year, I found myself staring at a computer screen with course information for a higher level course that I wanted to take. After two years of taking introductory computer science courses, I finally had the opportunity to dive into the thread-specific classes. And just like every other GT undergrad, I was stumped. So many options, so many different sections for each course, so many different lecture timings to consider. What would the optimum schedule look like? How could I juggle going to the gym, hanging out with friends, doing interviews for recruiting, and finishing classwork on time? And most importantly, considering the myriad of pre-requisites some courses needed, which ones could I actually take next semester?

At least I had GT Scheduler to plan my course schedule easily, but what about figuring out what combination of pre-requisite courses I needed to unlock a higher-level class? There was no resource for that. Moreover, many courses had a lot different combinations that could allow you to take it, but how could I decode that easily. I'd look at something like CS 3510: Design & Analysis - Algorithms, a course that every CS student needs to take, and see something like this under the pre-requisite section:

Now, I could spend around five minutes to carefully track the ANDs and ORs and figure out what classes I needed, but that's booooring. Wouldn't it be a lot more fun if there was a tool that helped you visualized the classes that you needed to take? I guess you can tell where this is going.

I already had some experience working with web development with Blitz Notes, so I decided to leverage that and design something using JavaScript. For the visualizations, I decided to use D3.js, a reputable framework used for some beautiful data illustrations.

During first 3-4 days, I worked on writing a script that scraped the web for the data related to a course and get the pre-requisite information. I worked with Beautiful Soup, and did some data-cleaning so that the data was in a format that I could use. Then, I created a Flask server with an endpoint that allowed me to obtain the data for any course in JSON format.

Next, I created a basic HTML and CSS website with a form for the course input that used JavaScript to make a request to the Flask server API endpoint that I created and obtain the data as a JSON. After obtaining the data, I used D3.js to generate a tree that showcased the prerequisites required for the given course. I utilized AND and OR nodes to showcase relationships between different prerequisite courses. After that, I made the course nodes clickable, so that you could click on the courses that you have taken and be able to see if you've unlocked the course you want to take.

If you're reading closely, you would have realized that the Flask backend that I created for the application technically doesn't need to exist. This is because JavaScript has functionality for making HTTP requests as well, and also has Beautiful Soup as a framework. Therefore, I could completely get rid of the backend and have the application be completely frontend. So that's what I decided to do when I had some free time. I converted the Flask app into a React app that utilized the JavaScript Fetch API. In order to host the website, I just used this website. So, you can check it out at Georgia Tech Prerequisite Visualizer.

It's up and running on my personal website for now, but I aim to reach out to the creators of GT Scheduler to see if this is something they'd like to integrate into their application so it can reach as many GT students as possible.

There are still some bugs for some courses such as MATH 1551, which has SAT scores as a prerequisite, that are not parsed correctly by my algorithm. Moreover, the tree renderings in the mobile version of the app don't really fit, but there's not much I can do about that. If you find any other bugs that I'm not aware of, feel free to let me know!

Overall, this was a great project to work on in my free time and I was able to gain a great understanding of using libraries like anime.js and D3.js.