visual-cs

Algorithm & data structure visualizations

โญ GitHub

See Algorithms Think

Interactive, animated visualizations of classic algorithms. Pure HTML/CSS/JS โ€” no build step, no framework.

Bubble Sort
Sorting
๐Ÿซง
Watch elements bubble up as adjacent pairs are compared and swapped. Tracks comparisons and swaps in real time with color-coded bars.
โฑ Animated ๐ŸŽ› Speed control ๐Ÿ“Š Stats
View โ†’
Binary Search
Search
๐Ÿ”
Step through the divide-and-conquer search strategy. See the search range narrow with each comparison until the target is found.
โฑ Animated ๐ŸŽฏ Interactive ๐Ÿ“Š Step counter
View โ†’
BFS on Grid
Graph
๐Ÿ—บ๏ธ
Paint walls, set start/end, and watch BFS flood-fill the grid. Frontier expands in orange, explored cells turn blue, path lights up yellow.
๐Ÿ–ฑ Draw walls ๐Ÿ‘ฃ Path tracing ๐Ÿ”ข Step mode
View โ†’
Quicksort
Sorting
โšก
Watch pivot selection and partitioning recurse through the array. Red pivot, blue/green pointers converge as the array is divided and conquered.
โฑ Animated ๐Ÿ“ Recursion depth ๐Ÿ“Š vs Bubble sort
View โ†’
Game of Life
Simulation
๐Ÿงฌ
Conway's cellular automaton on a 60ร—60 grid. Load classic patterns (Glider, Pulsar, R-pentomino) or draw your own and watch life emerge.
๐Ÿ–ฑ Draw cells ๐Ÿ”ฎ Patterns โฑ 1-60 FPS
View โ†’
AVL Tree
Tree
๐ŸŒฒ
Insert and delete values in a self-balancing BST. Replay single and double rotations frame by frame while every node shows its height and balance factor.
๐Ÿ” Single + double rotations โฏ Replay controls ๐Ÿ“ Height + BF
View โ†’
Floyd-Warshall
Graph
๐Ÿงฎ
See all-pairs shortest paths emerge as the distance matrix updates. The current pivot node, matrix cell, and best path on the graph stay synchronized step by step.
๐Ÿ“‹ Matrix state ๐Ÿงญ Path highlight โฏ Step replay
View โ†’
Topological Sort
Graph
๐Ÿงฉ
Compare Kahn's queue-based algorithm and DFS topological order on the same DAG. Watch edge removal, recursion, and output order side by side.
โ†” Side by side ๐Ÿ“š Queue vs stack ๐ŸŽจ Order coloring
View โ†’
Segment Tree
Data Structure
๐ŸŒณ
Inspect range sum queries, point updates, and lazy propagation on a full segment tree. The array and tree stay linked so every covered interval is visible.
โž• Lazy tags ๐Ÿ“ Update path ๐Ÿ“ฆ Segment combine
View โ†’
Dijkstra
Graph
๐Ÿงญ
Build a maze on a 20ร—20 grid, place start and end points, then watch Dijkstra expand the frontier and trace the shortest path step by step.
๐Ÿงฑ Toggle walls โฑ Speed control ๐Ÿ“ Path length
View โ†’
Heap Sort
Sorting
๐Ÿ—๏ธ
See heap sort in its two distinct phases: building the max heap and extracting the maximum into the sorted suffix, with pause and resume controls.
โฏ Pause/resume ๐Ÿ“Š 40 bars ๐Ÿ‘ฃ Step counter
View โ†’
BFS vs DFS
Graph
๐Ÿง 
Build your own graph, then compare breadth-first and depth-first traversal on the same node set. Queue and stack contents update live as the run advances.
๐Ÿ–ฑ Add nodes ๐Ÿ”— Drag to connect ๐Ÿ“š Queue vs stack
View โ†’
Bloom Filter
Probabilistic
๐Ÿซง
Watch three hash functions map words into a compact bit array. Test words to see true negatives, true positives, and occasional false positives.
๐Ÿ”ฃ Word input ๐ŸŽฏ Hash animation ๐Ÿ“ˆ FPR stats
View โ†’
Red-Black Tree
Tree
๐Ÿ”ด
Replay insert and delete fix-up step by step. Watch red-black color flips, left/right rotations, search paths, and all five invariants stay in sync.
๐Ÿ” Rotation replay ๐ŸŽจ Color flips โœ… 5 properties
View โ†’
Merge Sort
Sorting
๐Ÿ”€
Watch divide and conquer in action. The array splits recursively, then merges back in sorted order with color-coded split and merge phases.
โฏ Auto / step ๐Ÿ”€ Split & merge ๐Ÿ“Š Stats
View โ†’
A* Pathfinding
Search
โญ
Draw walls on a 20ร—20 grid, set start and end points, and watch A* use Manhattan distance heuristic to find the shortest path efficiently.
๐Ÿ–ฑ Draw walls ๐Ÿงญ Heuristic ๐Ÿ‘ฃ Path tracing
View โ†’
Skip List
Data Structure
โญ๏ธ
Layered linked list with fast-lane skipping. Watch coin-flip level promotion during insert and express-lane traversal during search.
๐ŸŽฒ Coin flips ๐Ÿ” Fast search ๐Ÿ“Š Comparisons
View โ†’
Trie
Search
๐Ÿ”ค
Prefix tree that stores words character by character. Type to insert words, search highlights paths, and prefix matches update in real time.
โŒจ๏ธ Type to add ๐Ÿ” Prefix search ๐Ÿ“Š Word count
View โ†’
Suffix Array
String
๐Ÿงฌ
Build the suffix array round by round with prefix doubling. Rank pairs, sorted suffixes, and the final LCP array stay synchronized through every phase.
๐Ÿงฉ Rank pairs โฏ Phase replay ๐Ÿ“š SA + LCP
View โ†’
KD-Tree
Data Structure
๐Ÿ“
2D spatial partitioning with alternating X/Y splits shown as colored lines. Click to add points, toggle NN mode to find nearest neighbors.
๐Ÿ–ฑ Click to add ๐Ÿ“ Nearest neighbor ๐ŸŽจ Split planes
View โ†’
B-Tree
Data Structure
๐Ÿ—‚๏ธ
Order-4 B-tree with search, insertion, and deletion. Watch keys split upward on insert and merge or borrow during delete to maintain balance.
๐Ÿ”€ Split/merge ๐Ÿ” Search path โฏ Step replay
View โ†’
LRU Cache
Data Structure
๐Ÿง 
Visualize `get` and `put` on an LRU cache backed by a doubly linked list and hash map. Tail eviction makes the least-recent item disappear on overflow.
๐Ÿ—ƒ Hash map โ†” DLL order ๐Ÿงน Eviction
View โ†’
Union-Find
Data Structure
๐Ÿชข
See disjoint sets merge with union by rank and flatten with path compression. Parent pointers update live after each find and union.
๐ŸŒฒ Forest view ๐Ÿ“‰ Compression ๐Ÿงฉ Components
View โ†’
Kruskal MST
Graph
๐ŸŒ‰
Sort edges by weight, then use Union-Find to grow a minimum spanning tree. Accepted edges turn green, rejected cycle edges flash red.
๐Ÿ“š Sorted edges ๐Ÿชข DSU โš– MST weight
View โ†’
Ford-Fulkerson Max Flow
Graph
๐ŸŒŠ
Find maximum flow from source to sink by repeatedly discovering augmenting paths through a residual graph. Compare BFS (Edmonds-Karp) vs DFS strategies on multiple graphs.
๐Ÿ” Augmenting paths โ†ฉ๏ธ Residual graph ๐Ÿ”ช Min-cut
View โ†’
Bellman-Ford
Graph
โš–๏ธ
Follow repeated edge relaxations on a directed weighted graph, including negative edges and the extra pass that exposes reachable negative cycles.
๐Ÿ” Passes โž– Negative edges ๐Ÿšจ Cycle detect
View โ†’
Fenwick Tree
Data Structure
๐ŸŒฒ
Inspect prefix sums in a Binary Indexed Tree. Updates climb upward with `lowbit`, while queries hop downward and accumulate contributing cells.
โž• Point update โˆ‘ Prefix query ๐Ÿ”ข lowbit
View โ†’
Radix Sort
Sorting
๐Ÿ”ข
Watch numbers distribute into buckets digit by digit. Non-comparative sorting that processes ones, tens, hundreds โ€” until the array is sorted.
๐Ÿชฃ 10 buckets ๐Ÿ”ข Digit highlight ๐Ÿ“Š O(dร—n)
View โ†’
DP Visualizer
Dynamic Programming
๐Ÿงฉ
Watch an LCS dynamic programming table fill cell by cell, then backtrack to recover one longest common subsequence through the finished grid.
๐Ÿ“‹ DP table โ†˜ Backtracking โŒจ๏ธ Custom strings
View โ†’
Counting Sort
Sorting
๐Ÿ”ข
Non-comparative linear-time sort for bounded integers. Watch elements get counted, positions cumulated, then placed into sorted output.
๐Ÿ“Š Count array โˆ‘ Cumulative ๐Ÿ“ฆ O(n+k)
View โ†’
Insertion Sort
Sorting
๐Ÿƒ
Pick up each element and slide it left past all larger values, growing a sorted prefix one card at a time.
โฑ Animated ๐ŸŽฏ Key element ๐Ÿ“Š Shift count
View โ†’
Shell Sort
Sorting
๐Ÿš
Insertion sort with a shrinking gap. Knuth's 3h+1 sequence pre-sorts distant elements so the final gap-1 pass is nearly free.
๐Ÿ”ข Gap sequence ๐Ÿชฃ Bucket groups ๐Ÿ“Š Shifts & comps
View โ†’
Prim's Algorithm
Graph
๐ŸŒฟ
Grow a minimum spanning tree one vertex at a time. A min-heap tracks the cheapest crossing edge; green nodes join the MST, yellow shows the active frontier.
โš– Min-heap ๐ŸŒฟ Greedy cut ๐Ÿ“Š MST weight
View โ†’
Tarjan's SCC
Graph
๐Ÿ”
Find all Strongly Connected Components in a directed graph with a single DFS. Watch disc/low values propagate and the stack pop entire SCCs at once.
๐Ÿ“š DFS stack ๐Ÿ”ข disc/low ๐Ÿงฉ SCC roots
View โ†’
Bridge & Articulation Points
Graph
๐ŸŒ‰
Find bridges and articulation points in an undirected graph via DFS. Watch disc/low values update, tree vs back edges distinguished, bridges glow red and cut-vertices turn gold.
๐Ÿ”ข disc/low ๐ŸŒ‰ bridges ๐Ÿ“ cut-vertices
View โ†’
Convex Hull
Geometry
๐Ÿ”ท
Graham Scan vs Jarvis March side by side. Click to add points and watch two algorithms race to wrap the smallest convex polygon around them.
๐Ÿ–ฑ Click to add โ†” Side by side ๐Ÿ“Š Step count
View โ†’
Hash Table
Data Structure
๐Ÿ—ƒ๏ธ
Insert, search, and delete keys while the djb2 hash function maps them to buckets. Toggle between Separate Chaining and Open Addressing (linear probe) to see how each strategy resolves collisions.
โ›“ Chaining ๐Ÿ” Linear probe ๐Ÿ“Š Load factor
View โ†’
Huffman Coding
String
๐Ÿงต
Count character frequencies, greedily merge the two lightest nodes, then walk the finished prefix tree to generate the optimal Huffman code table.
๐Ÿ“Š Frequency bars ๐ŸŒฒ Tree build 0101 Code table
View โ†’
Splay Tree
Data Structure
๐ŸŒด
Every insert, search, and delete splays the touched node toward the root. Replay zig, zig-zig, and zig-zag rotations to see how locality reshapes the BST over time.
๐Ÿ”„ Self-adjusting ๐ŸŽž Rotation replay ๐Ÿ“Š Access path
View โ†’
Treap
Data Structure
๐ŸŽฒ
A randomized BST that also obeys heap order on priorities. Watch inserts bubble upward, deletes rotate downward, and both invariants stay visible frame by frame.
๐ŸŽฏ Path highlight ๐Ÿ” Rotation replay ๐ŸŽฒ Random priorities
View โ†’
Quadtree
Data Structure
โ–ฆ
Insert points into a 2D quadtree, then switch to range query or nearest-neighbor mode to watch recursive subdivision and bounding-box pruning cut away most of the search space.
๐Ÿ–ฑ Spatial insert โฌ› Range query ๐ŸŽฏ NN pruning
View โ†’
LZ77 Compression
String
๐Ÿ—œ๏ธ
Sliding-window compression step by step. Watch the search buffer and lookahead buffer scan the input, find back-references, and emit (offset, length, char) tokens.
๐ŸชŸ Sliding window ๐Ÿ”— Back-references ๐Ÿ“Š Ratio stats
View โ†’
Fibonacci Heap
Data Structure
๐ŸŒ€
Lazy priority queue with amortized O(1) insert, find-min, decrease-key and union. Watch consolidation link equal-degree trees after extract-min, and cascading cuts propagate up marked ancestors on decrease-key.
โšก Amortized O(1) insert ๐Ÿ”— Cascading cut ๐Ÿ“ Consolidation
View โ†’
Levenshtein Distance
Dynamic Programming
๐Ÿ“
Watch the edit-distance DP table fill cell by cell. Color-coded cells reveal each operation โ€” match (free), delete, insert, or replace โ€” and the optimal alignment path is traced back through the matrix.
๐Ÿ“‹ DP table ๐ŸŽฏ Path trace โœ๏ธ Live edit
View โ†’
Cycle Detection
Linked List
๐Ÿ”
Floyd's Tortoise and Hare algorithm in three phases: detect the cycle, locate the exact start node (ฮผ), and measure the cycle length (ฮป). Configure tail and cycle size, then watch the pointers converge.
๐Ÿข Tortoise +1 ๐Ÿ‡ Hare +2 ๐Ÿ“ ฮผ + ฮป
View โ†’
Longest Common Subsequence
DP
๐Ÿงฌ
Watch the DP table fill cell by cell as LCS lengths are computed. Then trace back through the table to recover the actual subsequence โ€” the foundation of diff tools.
๐Ÿ“Š DP table โ†ฉ Traceback ๐Ÿ”ค LCS highlight
View โ†’
Bloom Filter
Data Structure
๐ŸŒธ
Insert elements and query membership in a probabilistic bit-array filter. Watch k hash functions light up bit positions, observe the theoretical false-positive rate climb as the array fills, and trigger false positives live.
๐Ÿ”ข k hash fns โš  False positives ๐Ÿ“Š FP rate formula
View โ†’
Manacher's Algorithm
String
๐Ÿชž
Find the longest palindromic substring in O(n). Watch the transformed string, p-array fill, center/boundary window, and free-copy vs. expand decisions step by step.
๐Ÿ“Š p-array ๐ŸชŸ C/R window โšก O(n)
View โ†’
Coin Change
DP
๐Ÿช™
Watch the DP table fill amount by amount as each coin denomination is tried. Improved cells light up on every new minimum, then traceback traces the exact coins used.
๐Ÿ“‹ DP table โ†ฉ Traceback ๐Ÿช™ Coin highlight
View โ†’
Topological Sort
Graph
๐Ÿ”ข
Kahn's BFS-based topological ordering of a DAG. Watch in-degrees update, the queue grow and shrink, and edges get consumed one by one. A cycle graph demonstrates cycle detection with a partial result and red highlights.
๐Ÿ“ฅ In-degree table ๐Ÿ”„ BFS queue โš  Cycle detection
View โ†’
Rope
String
๐Ÿชข
Strings split into short leaf chunks, with internal nodes storing left-subtree weights. Animate index lookup, split the logical string at any position, then concatenate the two halves back together.
โœ‚ Split / concat โš– Weight-guided index ๐ŸŒฟ Chunked leaves
View โ†’
Burrows-Wheeler Transform
String
๐Ÿ”„
Watch the BWT build all rotations, sort them lexicographically, and extract the last column. Then reconstruct the original via LF-mapping inverse transform.
๐Ÿ“‹ Rotation matrix ๐Ÿ”€ LF-mapping โฑ Step mode
View โ†’
Consistent Hashing
Distributed
๐Ÿ’
A hash ring with servers, virtual nodes, and keys. Add or remove servers and watch only nearby keys get remapped. Clockwise walk animation shows key-to-server assignment.
๐Ÿ”ต Virtual nodes ๐Ÿ“Š Load balance โฑ Animated
View โ†’
Raft Consensus
Distributed
๐Ÿ—ณ๏ธ
5-node Raft cluster with animated leader election, log replication, and heartbeat RPCs. Kill nodes to trigger re-election and watch the term system advance.
๐Ÿ”ต Leader election ๐Ÿ“‹ Log replication ๐Ÿ’€ Node failure
View โ†’
Paxos
Distributed
๐Ÿค
Single-decree Paxos with 3 proposers, 5 acceptors, and 2 learners. Animated Prepare/Promise/Accept/Accepted message flow with conflict scenarios and node failures.
๐Ÿ“จ Message phases โš” Conflict preset โฑ Step mode
View โ†’
Cuckoo Hashing
Data Structure
๐Ÿฆ
Two hash tables with O(1) worst-case lookup. Insert keys and watch the eviction chain as displaced elements hop between tables. Cycle detection triggers rehash.
๐Ÿ”ต Two tables ๐Ÿ”— Eviction chain ๐Ÿ”„ Auto rehash
View โ†’
van Emde Boas Tree
Data Structure
๐ŸŒฒ
Recursive โˆšU decomposition achieving O(log log U) predecessor queries. Nested box visualization shows summary and cluster structure for universe U=16.
๐Ÿ”ข Universe display ๐Ÿ“ฆ Nested structure ๐Ÿ” Successor query
View โ†’
Sieve of Eratosthenes
Number Theory
๐Ÿ”ข
Watch composites get crossed out as each prime sweeps through its multiples. Numbers that survive every sweep are prime โ€” classic O(n log log n) prime generation.
๐ŸŽฏ Prime sweep ๐Ÿ“Š Prime count โšก O(n log log n)
View โ†’
Miller-Rabin Primality Test
Number Theory
๐Ÿ”ฌ
Watch witness squaring chains reveal composite numbers. Decomposes nโˆ’1 = 2หขยทd, then tracks a^d โ†’ a^(2d) โ†’ โ€ฆ mod n โ€” any failure to hit nโˆ’1 exposes a composite. Beats Carmichael numbers that fool Fermat's test.
๐ŸŽฏ Witness test ๐Ÿ“Š Squaring chain โšก O(kยทlogยฒn)
View โ†’
57
Visualizations
0
Dependencies
โˆž
Fun