Sorting Algorithm Visualizer

An interactive visualizer that animates sorting algorithms one operation at a time. Select an algorithm, hit Sort, and watch bars slide into place. Each step is color-coded: blue for comparisons, pink for swaps, green for elements that have reached their final position.

Algorithms

Bubble Sort

Repeatedly walks the array comparing adjacent elements, swapping them if they're out of order. After each pass, the largest unsorted element "bubbles" to its correct position.

for i = 0 to n-1:
  for j = 0 to n-1-i:
    if arr[j] > arr[j+1]:
      swap(arr[j], arr[j+1])

Time complexity: O(n²) average and worst case. O(n) best case when already sorted (early exit on no-swap pass).

Selection Sort

Scans the unsorted portion for the minimum element, then swaps it into the next sorted position. Simple but always performs O(n²) comparisons regardless of input order.

for i = 0 to n-1:
  minIdx = i
  for j = i+1 to n-1:
    if arr[j] < arr[minIdx]:
      minIdx = j
  swap(arr[i], arr[minIdx])

Time complexity: O(n²) in all cases. Minimizes swaps — exactly n-1 in the worst case.

Insertion Sort

Builds the sorted portion one element at a time by shifting each new element left until it finds its correct position. Efficient on nearly-sorted data.

for i = 1 to n-1:
  j = i
  while j > 0 and arr[j-1] > arr[j]:
    swap(arr[j-1], arr[j])
    j--

Time complexity: O(n²) worst case (reverse-sorted input). O(n) best case (already sorted). Adaptive — performs fewer operations when the input has low inversion count.

Quick Sort

Partitions the array around a pivot element (here, the last element via Lomuto partition), then recursively sorts each side. The pivot lands in its final position after each partition step.

partition(arr, low, high):
  pivot = arr[high]
  i = low
  for j = low to high-1:
    if arr[j] <= pivot:
      swap(arr[i], arr[j])
      i++
  swap(arr[i], arr[high])
  return i

quicksort(arr, low, high):
  if low < high:
    p = partition(arr, low, high)
    quicksort(arr, low, p-1)
    quicksort(arr, p+1, high)

Time complexity: O(n log n) average case. O(n²) worst case (already sorted input with last-element pivot). In practice, the fastest general-purpose comparison sort due to cache-friendly access patterns.

Bogo Sort

The probabilistic anti-algorithm. Checks if the array is sorted; if not, randomly shuffles everything and checks again. Repeat until the universe ends or you get lucky.

while not sorted(arr):
  shuffle(arr)

Expected time complexity: O((n+1)!) — factorial growth. For 8 elements that's an expected 362,880 shuffles. For 15 elements... don't hold your breath.

The visualizer caps Bogo Sort at 50,000 shuffle attempts to prevent heat death of your browser tab.

Implementation

Each algorithm is implemented as an ES6 generator function. Instead of running to completion, the generator yields a step object after each comparison, swap, or shuffle — containing the operation type, the indices involved, and a snapshot of the array. A timer consumes these steps one at a time, updating the UI between each.

This generator approach means Bogo Sort works naturally: it yields each shuffle attempt in real time without pre-computing an unknowable number of steps.

Bars animate between positions using framer-motion's layout prop. When two values swap positions in the array, React preserves each bar's DOM node (keyed by value), and framer-motion interpolates the position change with a spring transition.

Tech

• ES6 generators for step-by-step algorithm execution
• React state for array + highlight tracking
• framer-motion layout animation for smooth bar repositioning
• setTimeout-based stepping with ref-based speed control (adjustable mid-sort)