Prerequisites Visualization

Hi!

This project aims to show course prerequisites in a graph form to make it easier to explore courses.

Check it out at https://andersontseng.ca/prerequisites-visualization.

Please note that the data does contain errors and omissions. As well, the data from UBC predates the workday migration, and the Langara and SFU data are not being actively updated (data was generated in July 2025). Please consult with your institutions page for the most accurate information. <3

Stack:

• Next.js, Tailwind, Sigma.js

Thanks to:

• SFU for making their course data available by API.
• UBCFinder and ubcexplorer.io (defunct) for making UBC course data available.

Autogenerated README:

An interactive graph visualization tool built with Next.js and React Sigma for visualizing course prerequisites and dependencies. Features dynamic CSV data loading, force-directed layouts, and comprehensive interactive controls.

🚀 Features

• Interactive Graph Visualization: Built with Sigma.js and React Sigma for smooth, performant rendering
• CSV Data Support: Load nodes and links from CSV files for easy data management
• Force-Directed Layout: Uses Force Atlas 2 algorithm for optimal node positioning
• Dynamic Color Coding: Automatically color-codes nodes by group using consistent hashing
• Interactive Controls:
  • 🔍 Search: Find and focus on specific nodes
  • 🔍 Zoom: Zoom in/out and reset view
  • 📺 Fullscreen: Toggle fullscreen mode
  • 🗺️ Minimap: Navigate large graphs easily
• Hover Effects:
  • Highlight connected nodes and edges
  • Hide labels for unconnected nodes
  • Visual focus on relationships
• Responsive Design: Works on desktop and mobile devices
• Static Export: Deployable to GitHub Pages and other static hosting

🛠️ Tech Stack

• Framework: Next.js 15 with TypeScript
• Visualization: Sigma.js + React Sigma
• Graph Processing: Graphology
• Layout Algorithm: Force Atlas 2
• Data Parsing: PapaParse (CSV)
• Styling: Tailwind CSS
• Icons: React Icons
• Package Manager: Bun

📦 Installation

1. Clone the repository:

   git clone https://github.com/yourusername/prerequisites-visualization.git
   cd prerequisites-visualization

2. Install dependencies:

   bun install

3. Run the development server:

   bun dev

4. Open your browser and navigate to http://localhost:3000

📊 Data Format

Nodes CSV (public/data/sfu/nodes.csv)

id,group,size
MATH101,Mathematics,3
PHYS101,Physics,2
CMPT120,Computing Science,4

Links CSV (public/data/sfu/links.csv)

source,target,value
MATH101,PHYS101,1
MATH101,CMPT120,1

🚀 Deployment

GitHub Pages

The project includes a GitHub Actions workflow for automatic deployment to GitHub Pages:

1. Push to main branch - deployment happens automatically
2. Manual deployment - use the "Actions" tab in GitHub

Other Static Hosts

Build the static export:

bun run build

Deploy the out/ folder to your preferred static hosting service.

🎮 Usage

1. Navigation: Use mouse/touch to pan around the graph
2. Zoom: Use scroll wheel or zoom controls
3. Search: Type node names in the search box to find and focus on specific nodes
4. Hover: Hover over nodes to see connections and hide unrelated labels
5. Fullscreen: Click the fullscreen button for immersive viewing

🔧 Configuration

Graph Settings

Modify graph behavior in src/app/sfu/graph.tsx:

// Force Atlas 2 Layout Settings
const positions = forceAtlas2(graph, {
    iterations: 300,
    settings: {
        gravity: 1,
        scalingRatio: 10,
        strongGravityMode: false,
        barnesHutOptimize: true,
        // ... more settings
    }
});

Sigma Container Settings

Customize rendering in the SigmaContainer settings:

settings={{
    allowInvalidContainer: true,
    renderLabels: true,
    defaultEdgeType: 'arrow',
    minCameraRatio: 0.005,
    maxCameraRatio: 1.5,
}}

📁 Project Structure

├── src/
│   ├── app/
│   │   ├── sfu/
│   │   │   └── graph.tsx          # Main graph component
│   │   ├── page.tsx               # Home page
│   │   └── layout.tsx             # Root layout
│   ├── components/
│   │   └── FocusOnNode.tsx        # Node focusing utility
│   ├── types/
│   │   └── graph.ts               # TypeScript types
│   └── utils/
│       └── colors.ts              # Color generation utilities
├── public/
│   └── data/
│       └── sfu/
│           ├── nodes.csv          # Node data
│           └── links.csv          # Edge data
└── .github/
    └── workflows/
        └── nextjs.yml             # GitHub Pages deployment