dedicated visualizer
Bubble Sort
Repeatedly swaps adjacent out-of-order values so larger numbers drift to the end. This page keeps the runner, chart, and controls focused on a single algorithm so the walkthrough feels calmer than the overview page.
session controls
Compare this algorithm against a related one, turn on quiz mode, or keep the current state in a shareable URL.
current shareable URL
Copy the URL to preserve this exact dataset, target, compare mode, and quiz state.
browse more
Want a different problem or visual mode? Jump back to the catalog and open another dedicated page.
open catalogscenario presets
Load a focused input that reveals a specific behavior quickly instead of hand-editing every value first.
dataset controls
Use your own array, randomize a fresh one, or restore defaults. The same dataset is shared by both panels in compare mode.
Enter up to 12 integers. Values are normalized to the range 1–99 for clean visualization.
chart + counters
The visualization and the live counters stay together so each step is easier to read.
current action · start scan
current action
start scan
comparisons
0
final 27
swaps
0
final 14
passes
0
final 6
sorted
0
final 8
steps
1 / 49
run summary
Finished in 49 steps. Final order: 1, 2, 3, 5, 6, 7, 8, 9.
comparisons
27
swaps
14
passes
6
sorted
8
steps
49
current explanation
Bubble sort begins by scanning adjacent pairs from left to right.
simple explanation
Look at two neighboring numbers at a time.
pseudocode
complexity card
best
O(n)
average
O(n²)
worst
O(n²)
space
O(1)
algorithm notes
intuition
Bubble sort repeatedly fixes local inversions until the biggest values float to the right edge.
tradeoffs
- Very easy to understand and animate.
- Too slow for large datasets.
- Early-exit optimization helps nearly sorted arrays.
when to use it
Use it mainly for learning and for discussing loop invariants, not for production sorting.
interview tips
- Mention that bubble sort is stable and in-place.
- Explain why the best case becomes linear with an early-exit flag.
what I learned building this
typed definitions
One algorithm schema now drives the catalog, counters, pseudocode, notes, and visual modes, which keeps the UI consistent as the lab grows.
replay over mutation
Precomputed steps made it much easier to synchronize explanations, metrics, quiz prompts, and scrubber playback without hidden state drifting out of sync.
portfolio framing
Shareable URL state, compare mode, and responsive layouts mattered as much as the algorithm logic because this page needs to teach clearly and still feel polished as a product.
more in this lane
Want a different take on the same problem family? These stay in the same category but change the strategy.
beginner
Selection Sort
Selects the minimum value from the unsorted suffix and places it into the next sorted slot.
beginner
Insertion Sort
Builds a sorted prefix by inserting each new value into the right gap.
intermediate
Merge Sort
Recursively splits the array and merges sorted halves into a fully ordered result.