Interactive educational tools
Data Structures Learning Lab
Manipulate the representation, follow the algorithm, and connect each visual change to the rule that caused it.
RepresentationSee the internal organization.
OperationControl the state change.
ExplanationConnect action to invariant.
- Deterministic stepsSorting can be paused, replayed, and inspected.
- Structure-specific viewsCells, pointers, trees, buckets, and graphs use different layouts.
- Honest scopeCapabilities are labeled; unfinished structures are not advertised.
Tool catalog
Choose the representation you need to understand.
The lab groups related structures without forcing them into one renderer. Each workspace includes complexity, use cases, tradeoffs, common mistakes, and a textual explanation of the visual mapping.
Linear structures
Arrays, singly linked lists, stacks, and queues.
- Indexed cells
- Pointer links
- LIFO / FIFO ends
Search & balanced trees
Binary search, AVL, and red-black trees.
- Hierarchical layout
- Traversal paths
- Balance invariants
Hash tables
Separate chaining and linear probing.
- Bucket mapping
- Collisions
- Load factor
Graphs & traversal
Directed or undirected graph construction, BFS, DFS, and weighted paths.
- Node-link layout
- Adjacency state
- Traversal order
Sorting algorithms
Bubble, insertion, merge, and quick sort with generated algorithm steps.
- Previous / next
- Play / pause / reset
- Pseudocode and counters
Binary heaps
Coordinated tree and array views for min and max heaps.
- Insert / extract
- Update / delete
- Heapify swaps
Capability map
What each workspace supports
“Direct” means the operation updates immediately. “Steps” means the operation is generated as replayable algorithm state.
| Workspace | Operations | Playback | Explanation | Tested core |
|---|---|---|---|---|
| Linear structures | Insert, remove, search, reset | Direct | Pseudocode + reference | Linked list |
| Trees | Insert, remove/search, traverse | Direct + traversal animation | Invariants + reference | BST, AVL, RBT |
| Hash tables | Insert, switch strategy, rehash | Direct | Load factor + reference | Collision behavior |
| Graphs | Create, connect, traverse, pathfind | Operation animation | Adjacency + reference | BFS, DFS, Dijkstra |
| Sorting | Generate, randomize, compare | Deterministic steps | Active line + counters | Four algorithms |
| Binary heap | Insert, extract, update, delete | Queued swaps | Tree + array + log | Browser verification |
Keyboard & access
Designed for more than color and motion.
Controls use visible text, focus indicators, and minimum touch sizes. Sorting playback supports Left/Right arrow stepping and Space to play or pause when focus is outside an input. Reduced-motion preferences shorten animated transitions.
Every visualizer includes a textual reference panel. Full serialization of every canvas and SVG edge remains a documented limitation.