admbarre / enviz

Enrollment visualization tool for CS BS degree at UCSC

#enviz Enrollment visualization tool for CS BS degree at UCSC

Motivation

Planning one's academic path towards a degree is a daunting task. Often the only resources available to a student are a catalog of courses and counselors. UCSC provides a curriculum chart in the form of a tree to show prerequisites and a natural progression of classes towards the degree. This is a good thing that benefits CS students and could be a benefit to others. However, it is a static document and offers little insight on its own. With JavaScript and D3 we can build a similar curriculum chart from course and enrollment data and provide helpful information and visualizations to students.

Objective

Currently this project is being pursued as the final project for the CMPS 165 Data Visualization capstone course at UCSC taught by Suresh Lodha. It is limited in scope to a subset of courses in the CS BS degree as a result. However, this project's goal is to be further generalized to benefit other degree programs, students wishing to transfer from community colleges to UCs, as well as other use cases. As time goes on a roadmap and timeline of objectives will be posted here detailing the project's growth.

Inspiration

This project is heavily inspired by the skill tree progressions present in many video games, specifically RPGs. Such a representation is clear and intuitive enough to be grasped without help from outside resources by all age groups. There is also a program available to students of the San Mateo Community College District called Degree Works. Its purpose is to help students plan their classes and track their progress. While a useful tool, it is not very intuitive and it is easy to get lost while using it.

enviz's Issues

Custom Force for clearer Graph

Scale label font-size according to node radius

Enrollment Data and Color Scale

-Create an enrollment data JSON for a sample quarter.
-Load JSON into program.
-Create color scale based on the ratio of (enrollment/capacity), fullness:

• 0 <= fullness < 1 Green for under-enrolled
• fullness == 1 Gold for critically-enrolled
• fullness > 1 Red for over-enrolled

-Apply color scale to nodes.

Line arrowhead markers

Line arrowhead markers are being drawn at center of node. They should be offset from the target node according to radius of the node so that they are drawn at the edge of the node.

Tooltips only display name

Tooltips should display class id, name, as well as class descriptions.

Load enrollmentData files via buttons.

-Dynamically construct list of buttons for each file in enrollmentData.
-Button calls updateEnrollment.