From CS 294-10 Visualization Sp10

Jump to: navigation, search


Class Scheduler Interactive Visualization

Planning and Storyboards


For this assignment, we'd like to examine the UC Berkeley schedule of classes, and to provide a better way of helping students to pick out their classes and to see possible alternatives for their course schedule. We would like to address the challenge of changes in the schedule. More often than not, it's hard to find the optimal configuration of classes. Because there are so many courses to look at, we'd like to look specifically at computer science courses and how to better improve upon selecting courses from that department.


We are aiming to produce a Web 2.0-ish version of the class scheduling system. A user should be able to input some course data in the form of the course department and number (i.e., "CS 294") or the course title ("databases"), and the query box will suggest courses that are similar to the user's search terms. There should also be a checkbox for "Show only non-conflicting courses" to ensure that a user is only looking at courses that can fit into their current set of courses. While typing out the course number or course title, a weekly schedule below the query box will show what courses may fit into the user's desired schedule in real-time.

Small Multiples



Layering multiple schedules on top of each other will allow user to compare time and other distinguishing factors. Small multiples of particular characteristics of a schedule (i.e. Time Spent in Class or Time in Between Classes) will draw out the differences and help the user weigh advantages and disadvantages.

Final Implementation



Upon further consideration, we realized that there would be a lot of data mining to retrieve course information, especially as there is no API available for obtaining such data. We decided to pursue a simpler project by obtaining a dataset from data.gov (http://www.data.gov/raw/337). We decided to look at employment rates and jobs, looking at the professions that are most heavily hit by the economy, in their respective regions.

Due to the large quantity of employment data, we chose to narrow down our employment data to computer-related jobs, which would be most relevant to us.


Our final visualization shows the number of computer and math related employments by metropolitan area. Although the data is overlaid on the geographical map of the US, we decided not to color code the metropolitan area for 2 reasons. One, it's not obvious what that region is from our data and two, we did not want to give it more visual weight for being a larger area. Instead we chose to use wedges to form a pie chart, colored and scaled by total employment in the area (larger and redder, the higher the employment). Second, for the interactive portion the user can use the convention navigation native to Google Maps and also can mouse over the pie pieces to get additional information. As a design choice, we emphasized comparing occupations between metropolitan areas by highlighting the corresponding occupation when any pie piece is moused over.

Source Code and Process

During this project, both of us contributed equally to the programming and data mining aspects of the project. We worked together throughout the duration of the project, from the brainstorming process up to the implementation of our project. We experienced many technical complications in using Protovis, but in the end we were able to produce a sufficient output that we feel quite satisfied with.

In total, we estimate 30 hours was spent on the project. 10 hours was spent brainstorming, planning, and finding data. Another 20 hours was spent on manipulating data and implementing and learning Protovis. Implementing and learning Protovis took the most time just because sometimes the coding was not intuitive. However, we also spent a surprising amount of time deciding what we wanted to do and where we would get the data.

The demo of our visualization can be found here: http://people.ischool.berkeley.edu/~jonyen/infovis/employment.html.

The data sets used are available here: http://people.ischool.berkeley.edu/~jonyen/infovis/employment.js and http://people.ischool.berkeley.edu/~jonyen/infovis/occupation.js

[add comment]
Personal tools