Sorting Algorithms
Sorting means arranging values in a particular order. There are many ways to do it. Enter a list of numbers, choose an algorithm and follow how it sorts the list. Each bar represents a number. The visualizer highlights every comparison, swap and write operation. You can also compare how all nine algorithms handle the same list.
Interactive workspace
Compares neighbouring values and swaps them when they are in the wrong order. After each pass, the largest remaining value moves towards the end of the list.
Enter whole numbers from 0 to 99. Separate numbers with spaces. You can enter up to 16 numbers.
Examples
The list
Step 0 of 53
- comparing
- swap or write
- final place
- not yet
Comparisons
0
Swaps or writes
0
Now
–
In final place
0/9
Step-by-step explanation
0 of 53 steps
Press Next or Play to follow the algorithm one comparison or change at a time.
Same list, every algorithm
| Algorithm | Comparisons | Swaps / writes | Average time | Stable |
|---|---|---|---|---|
| 30 | 16 | O(n²) | Yes | |
| 36 | 6 | O(n²) | No | |
| 22 | 16 | O(n²) | Yes | |
| 21 | 29 | O(n log n) | Yes | |
| 18 | 10 | O(n log n) | No | |
| 30 | 22 | O(n log n) | No | |
| 0 | 9 | O(n + k) | Yes | |
| 0 | 9 | O(d·(n + b)) | Yes | |
| 33 | 16 | depends on gaps | No |
The lowest comparison count is highlighted. Counting and radix sort never compare two values, so they show 0.
Under the hood
From input to screen
The experiment follows this process. Select any box to see what it does and which function or component is behind it.
Pipeline: input, parsing, simulation, steps, visualization
Click any box to see what it does and why it is built that way.
Start
Input
- What it does
- You enter a list of numbers and choose one of the nine sorting algorithms. These inputs are stored in React state.
- Where it lives
- SortingDemo.tsx (text, algo)
- Why it is built this way
- Only your input is stored. The sorted list and all the steps are calculated from it.
Technical notes
How Sorting Algorithms works
How the algorithm works
The simulator makes a copy of your list and sorts that copy. Your original input stays unchanged. Every comparison, swap or write is saved as a separate step. Each step shows the list at that moment, the positions being checked, the values already in their final positions and a short explanation.
Bubble, Selection, Insertion, Quick, Heap and Shell Sort report swaps. Merge, Counting and Radix Sort write values into their correct positions, so they report writes instead. Counting Sort does not compare two values, so its comparison count is 0.
Important steps
- 01Check the input list. It must contain 2 to 16 whole numbers between 0 and 99.
- 02Make a copy so the original list is not changed.
- 03Run the selected sorting algorithm.
- 04Save every comparison, swap or write with an explanation.
- 05Mark values as final when they no longer need to move.
- 06Show the final counts and compare all nine algorithms using the same list.
Relevant variables
- n
- Number of values, up to 16.
- array
- The complete list after each step.
- focus
- The positions being compared or changed.
- sorted
- Positions that have reached their final place.
- range
- The part of the list being processed by a divide-and-conquer step.
- comparisons, writes
- The live counts shown above the bars.
Time and space complexity
| Algorithm | Time | Space |
|---|---|---|
| Bubble, Selection, Insertion | O(n²). Bubble and Insertion can take O(n) when already sorted. | O(1) |
| Merge | O(n log n) | O(n) |
| Quick | O(n log n) average, O(n²) worst | O(log n) |
| Heap | O(n log n) | O(1) |
| Counting | O(n + k) | O(k) |
| Radix | O(d·(n + b)) | O(n + b) |
| Shell | Between O(n log n) and O(n²), depending on gaps | O(1) |
n is the number of values, k is the largest value for Counting Sort, d is the number of digits and b is the base 10 used by Radix Sort. The walkthrough uses additional O(n) space because it saves a copy of the list after every step. The table shows the algorithm's own space complexity.
Example input and output
Input
- List: 5 2 9 1 7
- Algorithm: Bubble
Output
- Bubble: 10 comparisons and 5 swaps.
- Insertion: 7 comparisons and 5 swaps.
- Counting: 0 comparisons.
Edge cases
- Already sorted list: Bubble Sort finishes after one pass, with n − 1 comparisons and no swaps.
- Reversed list: This is the worst case for Bubble Sort, Insertion Sort and Quick Sort when it uses the last value as the pivot.
- Duplicate values: All algorithms can handle duplicate values. Stable algorithms keep equal values in their original order.
- Invalid input: Lists with fewer than 2 values, letters, negative numbers, numbers above 99 or more than 16 values are rejected with a clear message.
Where the code lives
- Enginesrc/lib/sorting.ts
- Workspacesrc/components/SortingDemo.tsx
- Checkstests/sorting.test.ts