Data structure viewer
Step through stack, queue, deque, linked list, binary search tree, hash table (separate chaining) and min-heap operations and see a snapshot after every insert, delete, peek or lookup.
Runs in your browserEvery computation happens in your browser — your data never leaves this device.
Structure and operations
Every structure operation is a pure function in data-structure-viewer.ts and describeState produces the snapshot after each step; the page only replays them. The hash table uses separate chaining.
Snapshot replay
0none[]
This step：Initial state · Succeeded · Returned none
Steps
What this tool does
- Walk through a data structure step by step in class: LIFO on a stack, FIFO on a queue, both ends of a deque, or an insertion in the middle of a list — the snapshot shows the exact shape after every operation.
- Demonstrate how a binary search tree degenerates: insert 1 through 7 in order and watch the height climb to 7 (a linked list in disguise), then compare with a shuffled insertion order.
- Inspect hash distribution: insert 1, 8 and 15 and see them pile up in one bucket as a chain, then change the bucket count or the keys and watch the chain lengths move.
- Check the sift-up and sift-down of a min-heap: after each push or pop, confirm that no parent is greater than its children and that the root stays the minimum.
Example
Input
Structure "Stack", script: insert 1 / insert 2 / insert 3 / peek / delete / delete
Output
[] → [1] → [1, 2] → [1, 2, 3] → peek returns 3 → delete returns 3 → delete returns 2, the final snapshot is "1" annotated "Top 1", element count 1
Frame 0 is the initial state and every script line adds one more frame. Failed operations also get a frame: the snapshot is identical to the previous one, marked as failed with a reason (deleting from an empty stack reports that the structure is empty).
Frequently asked questions
Why is the linked list drawn as a plain sequence instead of nodes with pointers?
What you see is the logical order (1 -> 2 -> 3 -> null), stored in a plain array so that the snapshots stay testable and easy to replay. For inspecting pointers, node objects or memory addresses, a debugger or a dedicated pointer visualiser is a better fit; the insert-at index still follows list semantics.
What happens when I insert a duplicate key?
The binary search tree and the hash table both behave like a set: if the key is already there nothing changes, the snapshot stays the same and the step is annotated as a duplicate that was ignored. The min-heap keeps duplicates, because heap entries are priorities that may legitimately repeat. List insertion always appends.
How should I choose the hash bucket count?
The bucket count decides which chain a key lands on; the index is computed with a corrected modulo so that negative keys such as -1 still map to a valid bucket. A prime bucket count noticeably larger than the element count keeps chains short, while a small count or keys like 1, 8 and 15 (all congruent modulo 7) show how a long chain degrades lookup to a linear scan.
The min-heap array is not sorted — is that a bug?
No. A heap only guarantees that no parent is greater than its children, so the root is the minimum while siblings have no ordering and the array is not ascending. To get a sorted sequence you pop repeatedly: each pop returns the root and sinks the last element, and the popped values come out in ascending order.
What does a failed operation do to the structure?
Nothing. Failed operations — removing from an empty structure, deleting a missing key, an out-of-range index, or an operation the structure does not support — only record a failed step, and the snapshot stays identical to the previous frame. That means you can safely run a whole script to the end and then walk back through it to find where things went wrong.
Keywords：data structure viewerbinary search treehash tablemin heaplinked listdequealgorithm visualization数据结构可视化二叉搜索树哈希表最小堆链表栈与队列快照回放