About the Bubble Sort Visualizer
The Bubble Sort Visualizer lets you see how the algorithm works step by step. Instead of just reading code, you can watch elements compare, swap, and move in real time.
Each value is shown as a vertical bar, where height represents its size. As sorting progresses, bars change position and color to highlight comparisons and swaps.
Key Features
- Input Array → Enter numbers or generate randomly
- Controls → Run (auto), Step (one step), Reset
- Speed → Adjust animation speed
- Color Guide → Show comparing, swapping, sorted states
- Visualization → Bars represent values
- Stats → Elements, passes, comparisons, swaps
- Execution → Step-by-step actions
How to use the Bubble Sort Visualizer
Step 1 — Type numbers manually or click Random.
Step 2 — Use Step if you want to understand each operation or Run for full automatic sorting.
Step 3 — Adjust Speed for better and quick demonstration.
Step 4 — Watch how elements are compared and swapped.
Step 5 — Monitor comparisons and swaps.
How Bubble Sort Works
Bubble Sort is a simple sorting algorithm that works by repeatedly comparing adjacent elements in a list. If two elements are in the wrong order, they are swapped. This process continues until the entire list is sorted.
Step-by-Step Process
- Start from the first element
- Compare it with the next element
- Swap if the first is larger
- Move to the next pair
- Repeat until the end of the list
After one full pass, the largest element moves to the end (just like a bubble rising to the top). This process repeats for the remaining elements until everything is sorted.
Example
Array: 5, 3, 8, 4
- Compare 5 and 3 → Swap →
3, 5, 8, 4 - Compare 5 and 8 → No swap
- Compare 8 and 4 → Swap →
3, 5, 4, 8
Now 8 is in the correct position.
Time Complexity
- Best Case: O(n)
- Average Case: O(n²)
- Worst Case: O(n²)