workshop private

← all creations

Splice

viz · created 2026-09-07

The LC 146 LRU cache drawn as the two structures it is made of — a hash map for lookup and a doubly linked list for order — with every get and put broken into its pointer writes, the node in flight between them, and the map entries drawn as lines to the nodes they own.

algorithmsinterview-prepcanvas

An LRU cache with capacity k, fed a stream of get and put operations one at a time. The row across the middle is the doubly linked list — HEAD and TAIL sentinels at the ends, the most recently used entry beside HEAD, the next one to be evicted beside TAIL. Under it sits the hash map, one bucket per key the stream ever mentions, and every occupied bucket draws a line up to the node it points at. The whole point of the piece is that those are two structures, not one: the map answers “where is key 3?” in O(1) and knows nothing about order; the list answers “what goes next?” in O(1) and cannot find anything. LC 146 is the exercise of keeping them in agreement.

Each operation plays out in phases rather than as a before/after cut, because the phases are what a whiteboard trace has to get right:

get is the operation to watch. It is a read, and it still goes through unlink and insert, because reading an entry is what makes it recent. The tape at the top records every operation’s outcome — green hit, amber miss, blue insert, red eviction — so a run’s shape is visible at a glance.

The streams

Reuse

src/splice.js is a framework-free ES module with no canvas and no timers:

Same trace-per-tick shape as belady, collapse, rho, sift and window: the module produces frames, the demo draws them.

Gotchas