CPU Scheduling Visualizer

An interactive visualizer for classic CPU scheduling algorithms, built as a dependency-free, static HTML/CSS/JS project styled like a premium desktop developer tool (dark UI, violet/pink accents, Inter + JetBrains Mono).

Features

• Six scheduling algorithms, each in its own module:
  • First-Come, First-Served (FCFS)
  • Shortest Job First — Non-Preemptive (SJF)
  • Shortest Remaining Time First (SRTF) — preemptive SJF
  • Priority Scheduling — Non-Preemptive
  • Priority Scheduling — Preemptive
  • Round Robin (configurable time quantum)
• Animated Gantt chart — a combined timeline plus per-process lanes, a moving playhead, glow-on-execution blocks, and step-by-step or auto-playing animation with adjustable speed.
• Ready → Running → Completed queue visualization that updates as the simulated clock advances.
• Per-process results table with arrival, burst, priority, start/finish times, turnaround, waiting, and response time, plus the averages row.
• Algorithm comparison view — runs all six algorithms against the same workload and highlights the best/worst result per metric.
• Metric cards for average waiting, turnaround, and response time, CPU utilization, throughput, and context switches.
• Fully keyboard-navigable, semantic markup, and responsive down to mobile widths with no horizontal scrolling.

Project structure

cpu-scheduling-visualizer/
├── index.html              # App shell — header, sidebar, workspace, status bar
├── README.md
├── .gitignore
│
├── css/
│   ├── variables.css       # Design tokens: color, type, radius, shadow, motion
│   ├── layout.css          # Reset + app shell grid (header/sidebar/main/status bar)
│   ├── components.css      # Buttons, forms, tabs, badges, tooltip, toast, queue flow
│   ├── tables.css          # Process table, results table, compare table, stat cards
│   ├── gantt.css           # The Gantt chart: timeline, lanes, blocks, playhead
│   └── animations.css      # Shared keyframes, used sparingly and tastefully
│
├── js/
│   ├── app.js               # Entry point: ProcessManager, Scheduler dispatch,
│   │                        # CompareEngine, and all DOM event wiring
│   ├── ui.js                 # Rendering: GanttRenderer, ProcTableUI, CompareUI, toast()
│   ├── animation.js          # Playback controller (play/pause/step/reset/speed)
│   ├── utils.js               # Shared constants + simulation helpers
│   │
│   └── algorithms/
│       ├── fcfs.js
│       ├── sjf.js            # SJF (non-preemptive)
│       ├── srtf.js            # SJF (preemptive) — Shortest Remaining Time First
│       ├── priority.js        # Priority (non-preemptive + preemptive)
│       └── roundRobin.js
│
├── assets/
│   ├── icons/                # Reserved for any exported/standalone icon assets
│   └── images/                # Reserved for screenshots, OG image, etc.
│
└── docs/                      # Reserved for extended documentation / screenshots

Running it

This project uses native ES modules (<script type="module">), so it must be served over http:// rather than opened directly as a file:// URL (browsers block module imports from the filesystem). Any static file server works:

# Python
python3 -m http.server 8080

# Node (with the `serve` package)
npx serve .

Then open http://localhost:8080 (or the port your server prints).

Architecture notes

• Algorithms are pure functions. Each file in js/algorithms/ exports a function that takes a list of processes (and, for Round Robin, a quantum) and returns { gantt, metrics, totalTime, totalBurst }. They never touch the DOM, which makes them easy to unit test or reuse elsewhere.
• utils.js holds the simulation helpers shared by every algorithm (prep, buildMetrics, mergeGantt, nextArrival) plus static data like ALGO_META and the process color palette, so there's a single source of truth instead of duplicated logic per algorithm.
• ui.js only reads the plain data objects the algorithms produce and turns them into DOM — it has no scheduling logic.
• animation.js just drives GanttRenderer's step index on a timer; it doesn't know anything about scheduling or process data.
• app.js is the only file that wires document.addEventListener calls; it owns process CRUD (ProcessManager), dispatches to the right algorithm (Scheduler), and orchestrates the comparison run (CompareEngine).

Formulas

Turnaround Time = Finish Time − Arrival Time
Waiting Time     = Turnaround Time − Burst Time
Response Time    = First CPU Time − Arrival Time
CPU Utilization  = (Total Burst Time / Total Elapsed Time) × 100
Throughput       = Number of Processes / Total Elapsed Time

Accessibility

• Semantic landmarks (header, aside, main, footer, nav) and ARIA roles for tabs (role="tablist" / "tab" / "tabpanel").
• Every interactive control is reachable and operable by keyboard, with a visible focus ring (:focus-visible) distinct from the mouse hover state.
• aria-live="polite" regions for the algorithm description and the live process queue so screen readers announce updates without interrupting.
• Respects prefers-reduced-motion.

License

Free to use and adapt for coursework, portfolios, or further development.