Inspiration

When one of my engineering professors were teaching us about PERT charts, they mentioned (offhand and unprompted) that the structure of a course dependency tree was also a directed graph. I jotted this down as a project idea as soon as I heard it, and it just so happened to come in handy when the theme of this hackathon, "A Hack For Students", was announced.

What it does

It's a single gigantic SVG that lets you browse the relationships of every course at UWaterloo (my school). If you open it in a web browser, you can Ctrl-F for any course and browse for its prerequisites, corequisites, and antirequisites. For more information and to download, check out the Github repo below!

How I built it

I used UWaterloo's API to request for all the courses over this semester (Winter 2025), loaded it into a Polars (Pandas rewritten in rust) DataFrame, cleaned the data, converted it to the DOT Language using GraphViz bindings for python, and exported it into a vector file format that could be easily viewed. I used the VSCode port of Jupyter Notebook to test the code so I would not have to run a Python script over and over again.

Challenges I ran into

My original idea was to render the tree as a reactive Vue.js app since I had been trying to learn Vue for the last couple of weeks. I dropped the idea entirely after I spent two hours failing to get the infinite canvas to work.

Accomplishments that I'm proud of

I finally finished a full Hackathon project for once, which wouldn't be possible if I spent 11 more hours debugging Vue. Maybe "killing your darlings" is a good idea when your under a time limit and you're brain is boiling.

What I learned

I finally figured out how GraphViz worked! DOT is the coolest DSL for real! This was also a great opportunity for me to exercise my Regex skills, something that I've only recently started becoming comfortable with. Such a horrifying Lovecraftian write-only language!

What's next for UWaterloo Dependency Tree

This project wouldn't be truly [sic] finished until I make the Vue interface where a course's dependencies would highlight as you dragged it around the tree, but that's gotta wait until I'm less terrible at web dev.

Built With

  • dot
  • graphviz
  • jupyter
  • polars
  • python
  • regex
Share this project:

Updates