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.

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.