Degree Validation & Visualization Blog

[wbne]

Hi I'm Ben and I'm starting to really feel the schoolwork now

Right now I'm currently working on a tool that will generate a degree plan, validate a pre-existing plan, and visualize it in useful ways.

Currently I have the core algorithm for the degree generation and validation finished and I am waffling around thinking of ways to implement visualization techniques. So instead of throwing ideas at myself I've decided to write this discussion to get feedback, ideas, and to feel like an internet celebrity :^)

List of things to do

Degree Generator

• Enforce credit hour demands and stuff the courses into the limit

Degree Validator

• Write test data
• Develop an effective way to ensure pre-requisites are met per course

Degree Visualizer

• Decide set of ways the data should be represented
• Find appropriate libraries to visualize the data
• Hook it up with the other two features

While I can easily do the first two features, the third one requires a little too much creative juice. I'm more of a coffee person.

At the moment, I know I want a network graph and a tree graph but those don't feel nearly as interactive or fun.

The super creative idea is to replicate a solar system where the "sun" is the target course (eg. CS 4348) and the orbiting bodies are direct pre-requisites. If a pre-requisite has its own required courses then that pre-requisite course will also have bodies orbiting it. While it is pretty elaborate and not very space efficient, I think it would be a cool, interactive, and thematic way to visualize a course.

Any feedback and discussion is once again appreciated!

[ZzRanger]

Data Vis Idea

Drawing inspiration from my childhood days, I propose visualizing courses in a degree as points that form a constellation. Each course will be a dot on the constellation, and courses that are completed will have the area around them colored in, similar to the second image. Related courses will have lines connecting them to indicate pre/corequisites.

Data Vis Libraries

The vis-network library might be a good option for visualizing data. It's used to display networks with nodes and edges. I think this serves our use cases perfectly if we map courses to nodes and pre/corequisites to edges.

Example of the vis-network library in action: https://utdegreeplanner.com/graph

Npm Link: https://www.npmjs.com/package/vis-network