An interactive algorithm and data-structure visualisation platform, rendering sorting, graph and tree operations as animated 3D scenes to make execution and complexity legible step by step.
Sorting, graph and tree operations rendered as animated 3D scenes, built to make data structures legible while they run.
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.
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.
Renderer: Three.js
Covers: Sorting · graphs · trees
Build: Vite 6
Divyakush Punjabi