Project 5: Curriculum Visualization

OSU "bingo sheets" include a sample 4-year plan for completing the degree. For example, here is the curriculum sheet for the BS CIS program (see the second page). While the plan is designed to respect course prerequisites, it does not include information about these pre-requisite chains directly.

Course prerequisite information is available in this document and, more generally, in the course catalog and syllabus tool. While this flow chart is consistent with the order in which students should take courses, it does not include information about arranging courses into a semester-by-semester plan.

Your task is to create a visualization that shows both pieces of information simultaneously.

An example of such a visualization is the curricular flowchart tool at the University of Buffalo, where color-on-hover reveals pre- and post-requisites for each course. Buffalo's CS degree flowchart is here. This approach has been adopted and modified by Illinois, where you can see the result for the CS degree here.

Testing Locally

To view and test your site, you should use a local web server. For example, if you are using middleman, a local web server is started by running bundle exec middleman server.

Alternatively, you can start a local web server by running, in the root of your project:

$ npx serve

As a third alternative, you can install the Live Server extension in VS Code. With this extension, you will see a "Go Live" icon at the bottom of your VS Code window. Clicking that button launches/closes a local web server, including live reloading when you make changes.

Multiple JavaScript Files

The easiest way to split your JavaScript code into multiple files is to simply use multiple <script> tags to include each of the files. A function defined in the first script can be called by code in the second script. But that means you can not have circular dependencies between the files.

A slightly more complex (but more robust) way to do this decomposition is to use modules. At the highest level, you do 3 things:

Include the code in your html page using <script type="module" src=...></script> to include the JavaScript file(s)
Use an export statement in each module to declare which functions/variables are visible outside of the module
Use an import statement in other modules to bring in the functions/variables you want to use from other modules.

For more details (including examples), see the excellent article on MDN.