Back to Projects04

Algorithms II Visualizer

An interactive, single-page visualizer covering three Algorithms II topics, built for a university midterm with step-by-step animation and pseudocode highlighting.

JavaScriptHTMLSVGView on GitHub
Why I Built This

For an Algorithms II midterm, I kept noticing that algorithms like matrix chain multiplication are easy enough to code but hard to actually build real intuition for just by reading the code. You can trace through a DP table on paper once and still not really feel why it works.

So instead of writing a script that prints an answer, I built a visualizer that animates every step: the DP cost and split tables filling in cell by cell, the recursion tree for merge sort branching out with a live Gantt chart of processor utilization, the Extended Euclidean algorithm unwinding one recursive call at a time.

Everything renders natively in SVG, with pseudocode highlighting synced to whatever's animating, so you can watch the code and the visual update together instead of trying to hold both in your head at once.

Process
How It Works

Watch the pseudocode and the animation move together, line by line.

01

Pick an algorithm, Matrix Chain DP, Parallel Merge Sort, or Extended Euclidean, and step through it one move at a time.

02

Every animation frame syncs to the exact pseudocode line driving it.

03

A live Brent's theorem bound tracks the parallel merge sort's theoretical vs. actual speedup as it runs.

How It Works
Demo
In Action

Three algorithms, three ways of watching them think.

In Action01 / 03

Matrix Chain Multiplication: the DP cost and split tables filling in cell by cell.

Gallery01 / 02
By the Numbers
3

Algorithms Visualized

Zero

Build Dependencies

SVG

Native Rendering

Highlights
  1. 01

    Built three fully animated visualizations (Matrix Chain Multiplication using dynamic programming, Parallel Merge Sort using a fork-join model, and the Extended Euclidean Algorithm), each with step-by-step playback and pseudocode highlighting.

  2. 02

    Rendered every visualization natively in SVG, including DP cost/split tables, recursion trees, and a Gantt chart of processor utilization, with no canvas API or external charting library.

  3. 03

    Computed a live Brent's theorem bound (T_p ≤ W/p + D) alongside the Gantt chart to show the parallel merge sort's theoretical vs. visualized speedup.

  4. 04

    Shipped as a single self-contained HTML file with no build step or dependencies, with dark/light theming persisted via localStorage.