Documentation

Overview

VisualSorting is an interactive tool designed to help you understand how different sorting algorithms work. Watch as arrays are sorted in real-time, with visual feedback showing comparisons (yellow), swaps (red), and sorted elements (green).

Features

Advanced Options

Expand the Advanced Options panel to access additional settings:

Benchmarking

The Benchmark tab allows you to compare algorithm performance objectively. It uses Web Workers to run algorithms in a background thread, ensuring the UI remains responsive even during heavy computations. Unlike the visualizer which adds delays for visibility, benchmarks run algorithms at full speed.

How It Works

1. Set the array size (larger = more meaningful results)
2. Set the number of test runs (more runs = more accurate averages)
3. Select which algorithms to include
4. Click "Run Benchmark"

Scoring System

Each algorithm receives a score from 0-100 based on weighted metrics:

Bubble Sort

Bubble Sort repeatedly steps through the list, compares adjacent elements, and swaps them if they're in the wrong order. The algorithm gets its name because smaller elements "bubble" to the top of the list.

How It Works

1. Compare adjacent elements starting from the beginning
2. Swap if the left element is greater than the right
3. After each pass, the largest unsorted element is in its final position
4. Repeat until no swaps are needed

Selection Sort

Selection Sort divides the array into sorted and unsorted regions. It repeatedly finds the minimum element from the unsorted region and places it at the end of the sorted region.

How It Works

1. Find the minimum element in the unsorted portion
2. Swap it with the first unsorted element
3. Move the boundary between sorted/unsorted one position right
4. Repeat until the entire array is sorted

Insertion Sort

Insertion Sort builds the final sorted array one element at a time. It's similar to how you might sort playing cards in your hand.

How It Works

1. Start with the second element
2. Compare it with elements to its left
3. Shift larger elements right to make space
4. Insert the element in its correct position
5. Repeat for all remaining elements

Merge Sort

Merge Sort is a divide-and-conquer algorithm that recursively splits the array in half, sorts each half, and then merges them back together.

How It Works

1. Divide: Split the array into two halves
2. Conquer: Recursively sort each half
3. Combine: Merge the sorted halves

Quick Sort

Quick Sort picks a "pivot" element and partitions the array around it—elements smaller than the pivot go left, larger go right. It then recursively sorts the partitions.

How It Works

1. Choose a pivot element
2. Partition: rearrange so all smaller elements come before pivot
3. Recursively apply to left and right partitions

Dual-Pivot Quick Sort

Dual-Pivot Quick Sort (Yaroslavskiy's algorithm) uses two pivots to partition the array into three parts. It's the default sorting algorithm in Java since JDK 7.

How It Works

1. Choose two pivots P1 and P2 where P1 ≤ P2
2. Partition into three regions: elements < P1, elements between P1 and P2, elements > P2
3. Place pivots in their final positions
4. Recursively sort the three partitions

IntroSort

IntroSort (Introspective Sort) is a hybrid algorithm that starts as Quick Sort but switches to Heap Sort when the recursion depth exceeds a limit. It's the default in C++ std::sort.

How It Works

1. Set depth limit = 2 × log₂(n)
2. Use Quick Sort partitioning
3. If recursion exceeds depth limit, switch to Heap Sort
4. Use Insertion Sort for small subarrays (≤16 elements)

Heap Sort

Heap Sort uses a binary heap data structure. It first builds a max-heap from the array, then repeatedly extracts the maximum element.

How It Works

1. Build a max-heap from the array
2. Swap the root (maximum) with the last element
3. Reduce heap size by one
4. Heapify the root to restore max-heap property
5. Repeat until heap size is 1

Shell Sort

Shell Sort is an optimization of Insertion Sort that allows swapping elements that are far apart. It uses a decreasing sequence of gaps.

How It Works

1. Start with a large gap (n/2)
2. Sort elements that are 'gap' positions apart using insertion sort
3. Reduce the gap by half
4. Repeat until gap is 1 (final insertion sort)

Tim Sort

Tim Sort is a hybrid algorithm derived from Merge Sort and Insertion Sort. It's the default sorting algorithm in Python and Java. It exploits natural runs (pre-sorted sequences) in the data.

How It Works

1. Divide the array into small runs (32-64 elements)
2. Sort each run using Insertion Sort
3. Merge runs using a modified Merge Sort
4. Use a stack to track runs and merge efficiently

Radix Sort (LSD)

Radix Sort sorts numbers digit by digit, from least significant to most significant (LSD variant). It uses Counting Sort as a subroutine for each digit.

How It Works

1. Find the maximum number to know the number of digits
2. For each digit position (starting from ones place):
3. Use Counting Sort to sort by that digit
4. Repeat for all digit positions

Radix Sort (MSD)

MSD (Most Significant Digit) Radix Sort processes digits from left to right, recursively sorting buckets. Unlike LSD, the sorted order emerges visually from left to right.

How It Works

1. Sort by the most significant digit first
2. Recursively sort each bucket by the next digit
3. Continue until all digits are processed

Bucket Sort

Bucket Sort is a distribution sort that scatters elements into "buckets" based on their value ranges, sorts each bucket, then gathers them back together.

How It Works

1. Create empty buckets covering the value range
2. Scatter: place each element in its corresponding bucket
3. Sort each bucket (using Insertion Sort or similar)
4. Gather: concatenate all buckets in order

Counting Sort

Counting Sort is a non-comparison sorting algorithm that counts the occurrences of each unique value and uses arithmetic to determine positions. It achieves linear time for small integer ranges.

How It Works

1. Find the range (min to max) of values
2. Create a count array of size (max - min + 1)
3. Count occurrences of each value
4. Reconstruct the sorted array from counts

Gravity (Bead) Sort

Gravity Sort simulates beads falling on vertical poles. Imagine an abacus turned on its side—beads fall due to gravity, naturally sorting by count.

How It Works

1. Represent each number as a row of beads
2. Let beads "fall" due to gravity
3. Count beads in each column to get sorted values

Bitonic Sort

Bitonic Sort first creates a "bitonic sequence" (ascending then descending) and then merges it. It's designed for parallel processing.

How It Works

1. Recursively build bitonic sequences
2. Merge bitonic sequences in alternating directions
3. Compare-and-swap pairs at decreasing distances

Comb Sort

Comb Sort improves on Bubble Sort by comparing elements separated by a gap that shrinks over time. The shrink factor is typically 1.3.

How It Works

1. Start with gap = n/1.3
2. Compare and swap elements 'gap' apart
3. Shrink gap by dividing by 1.3
4. Continue until gap = 1 and no swaps occur

Gnome Sort

Gnome Sort is similar to Insertion Sort but simpler. It's called "Gnome Sort" because it works like a garden gnome sorting flower pots.

How It Works

1. If current element ≥ previous, move forward
2. If current element < previous, swap and move back
3. When position 0 is reached, move forward
4. Continue until end of array is reached

Cocktail Shaker Sort

Cocktail Shaker Sort (bidirectional Bubble Sort) alternates between scanning left-to-right and right-to-left, addressing the "turtle" problem in regular Bubble Sort.

How It Works

1. Bubble forward (left to right)
2. Bubble backward (right to left)
3. Repeat, shrinking the unsorted range from both ends

Odd-Even Sort

Odd-Even Sort alternates between comparing/swapping odd-indexed pairs and even-indexed pairs. It's designed for parallel processing.

How It Works

1. Compare all (odd, odd+1) pairs, swap if needed
2. Compare all (even, even+1) pairs, swap if needed
3. Repeat until no swaps occur in a full pass

Cycle Sort

Cycle Sort minimizes the number of writes to memory. It places each element in its correct position by counting smaller elements.

How It Works

1. For each element, count how many elements are smaller
2. Place the element at that position
3. Take the displaced element and repeat
4. Continue until the cycle returns to the start

Pancake Sort

Pancake Sort uses only one operation: flip the first k elements. It's like sorting a stack of pancakes using a spatula.

How It Works

1. Find the largest unsorted pancake
2. Flip it to the top
3. Flip it to its correct position
4. Repeat for the remaining unsorted pancakes

Strand Sort

Strand Sort repeatedly extracts sorted "strands" (ascending subsequences) from the input and merges them into the output. It's optimized for data with existing sorted runs.

How It Works

1. Extract a "strand": take first element, then add any following elements that are larger
2. Merge the strand into the output (like Merge Sort's merge step)
3. Repeat until all elements are extracted

Stooge Sort

Stooge Sort is a notoriously inefficient recursive algorithm. It's slower than Bubble Sort and is mainly of theoretical interest.

How It Works

1. If first element > last element, swap them
2. If there are 3+ elements:
3. Stooge sort the first 2/3
4. Stooge sort the last 2/3
5. Stooge sort the first 2/3 again

Bogo Sort

Bogo Sort (also called "stupid sort" or "slow sort") randomly shuffles the array until it happens to be sorted. It's the ultimate example of what NOT to do.

How It Works

1. Check if the array is sorted
2. If not, randomly shuffle all elements
3. Repeat until sorted (could be never!)

Circle Sort

Circle Sort compares pairs of elements equidistant from the center, recursively splitting and comparing until sorted.

How It Works

1. Compare and swap pairs: first with last, second with second-to-last, etc.
2. Recursively apply to left and right halves
3. Repeat until no swaps occur in a full pass

Algorithm Race

The Compare tab allows you to race multiple algorithms against each other on the same array data. This provides a direct visual comparison of their behavior and efficiency.

Features

• Up to 25 Racers: Add as many algorithms as you want (grid layout adjusts automatically).
• Identical Data: All algorithms sort a copy of the exact same initial array.
• Real-time Stats: Watch the comparison and swap counters tick up live.
• Leaderboard: See who finished first once the race is complete.

Custom Algorithms

The Custom tab gives you the power to implement your own sorting algorithms using JavaScript! Your code runs in a sandboxed environment and controls the visualizer directly.

API Reference

You have access to the following variables and functions:

• arr: The array of numbers to sort (0-100). Valid indices: 0 to arr.length - 1.
• await compare(i, j): Highlights bars at indices i and j (yellow). returns nothing.
• await swap(i, j): Swaps elements at indices i and j and highlights them (red). Updates the visualizer.
• await sleep(ms): Pauses execution for ms milliseconds.
• stats.comp: Counter for comparisons (increments automatically by compare()).
• stats.swap: Counter for swaps (increments automatically by swap()).

let n = arr.length;
for (let i = 0; i < n - 1; i++) {
    for (let j = 0; j < n - i - 1; j++) {
        // Visualize comparison
        await compare(j, j + 1);
        
        if (arr[j] > arr[j + 1]) {
            // Swap and visualize
            await swap(j, j + 1);
        }
    }
}