Divyakush Punjabi
AlgoVerse — Interactive learning

AlgoVerse — Data Structure and Algorithm Visualizer

Sorting, graph and tree operations rendered as animated 3D scenes, built to make data structures legible while they run.

Renderer
Three.js
Covers
Sorting · graphs · trees
Build
Vite 6

What it had to solve

Complexity is taught as notation and understood as motion. A student can recite that quicksort is O(n log n) long before they can see why the partition step is what buys it. Static diagrams show the state before and after; what is missing is the middle, and the middle is where the intuition is.

The decisions that shaped it

The algorithm drives the scene

Sorting, graph and tree operations are rendered as animated 3D scenes in Three.js, stepped by the algorithm itself rather than replayed from a recording. The visualisation is a view of real execution state, so what you watch is what the code actually did.

Three dimensions for the structures that need them

Trees and graphs stop being legible in two dimensions as soon as they have any depth — edges cross and the shape is lost. Rendering in 3D keeps the structure readable while it changes.

Step-by-step rather than play-through

Execution is exposed a step at a time so that complexity can be reasoned about at the point it is incurred, which is what makes the platform a teaching tool instead of an animation.

A modern build for a heavy client

React 19 with TypeScript on Vite 6, styled with Tailwind. A visualiser is an unusually client-heavy application, so build speed and type safety across the algorithm state carry more weight here than in a content site.

How the pieces sit together

Application
React 19 + TypeScript, built with Vite 6
Rendering
Three.js scenes driven by algorithm execution state
Algorithms
Sorting, graph and tree operations, stepped explicitly
Styling
Tailwind CSS

Built into the product

Sorting visualisation

Comparisons and swaps as they happen.

Graph and tree operations

Traversals rendered with structure intact.

Step-by-step execution

Pause at the point complexity is incurred.

3D scenes

Depth used to keep structures legible.

What it is built out of

Application
React 19, TypeScript, Vite 6
Rendering
Three.js
Styling
Tailwind CSS

What it looks like

AlgoVerse — The platform as it opens, before a lab is entered.
The platform as it opens, before a lab is entered.
AlgoVerse — Dashboard — the two ways in: run a sort, or open a structure.
Dashboard — the two ways in: run a sort, or open a structure.
AlgoVerse — Sorting Lab: the array as bars, stepped one comparison at a time.
Sorting Lab: the array as bars, stepped one comparison at a time.
AlgoVerse — Comparison Arena — two algorithms on the same input, side by side.
Comparison Arena — two algorithms on the same input, side by side.
AlgoVerse — Complexity Lab: measured growth curves rather than a table of notations.
Complexity Lab: measured growth curves rather than a table of notations.
AlgoVerse — Algorithm Deck — pseudocode, properties and bounds for each primitive.
Algorithm Deck — pseudocode, properties and bounds for each primitive.
AlgoVerse — Choosing a tree to build: BST, AVL, min-heap or max-heap.
Choosing a tree to build: BST, AVL, min-heap or max-heap.
AlgoVerse — A tree under traversal, with node operations against it.
A tree under traversal, with node operations against it.

What it produced

3D
Live scenes rather than static diagrams
Stepped
Execution exposed one operation at a time
3
Families: sorting, graphs, trees