Expanded Documentation

Overview

VisualSorting is an interactive platform for learning and evaluating sorting algorithms. It combines real-time visualization, operation metrics, and controlled input generation so users can connect theoretical complexity with observed behavior.

Visual Feedback System

The visualizer uses a consistent color coding system throughout all modes:

Educational Philosophy

Beyond visual demonstration, the platform supports evidence-based reasoning about algorithm design:

• Why some algorithms are faster: See how divide-and-conquer approaches tackle large problems efficiently
• Trade-offs between algorithms: Observe how some use more comparisons but fewer swaps, or vice versa
• Best and worst cases: Experiment with different data distributions to see when algorithms excel or struggle
• Memory usage patterns: Understand why some algorithms need extra space while others work in-place

Quick Start Guide

Use the following workflow to run your first reproducible comparison in under a minute.

Adjusting Array Size

The size slider controls how many elements are in your array (default range: 10-400 elements). Consider these guidelines:

• Small arrays (10-30): Best for learning. You can follow individual elements and understand each step.
• Medium arrays (50-100): Good for comparing algorithm patterns. You'll see characteristic shapes emerge.
• Large arrays (200-400): Best for appreciating efficiency differences. Slow algorithms become visibly slower.

Understanding Speed Settings

The speed slider controls the delay between visualization steps:

• Slow (left): ~500ms between steps. Perfect for step-by-step analysis and teaching.
• Medium (center): ~50ms between steps. Balanced view of algorithm behavior.
• Fast (right): ~1ms between steps. Shows overall patterns quickly. May appear instant for efficient algorithms.

Interface Tour

The interface is organized by task: visualization, stepwise inspection, comparative racing, benchmarking, custom implementation, and analytics.

Navigation Tabs

The top navigation bar provides access to six distinct modes:

Statistics Panel

The floating statistics panel (top-left during visualization) shows:

• Comparisons (Comp): How many times two elements have been compared. This is the primary metric for comparison-based sorts.
• Writes (Swaps/Writes): How many times elements are moved or overwritten. Important for understanding memory-write cost.

Advanced Options Panel

Click "Advanced Options" to expand additional settings (covered in detail in the Features section).

All Features

Explore the full range of features available in the Advanced Options panel and throughout the application:

Array Distribution Types

Control how the initial array is generated to test algorithms under different conditions:

Audio Features

Audio feedback provides an additional signal channel for operation cadence and value movement:

• Pitch Mapping: Each element's value is mapped to a musical pitch. Higher values produce higher tones, lower values produce lower tones.
• Comparison Sounds: Short tones play when elements are compared, creating a melodic pattern unique to each algorithm.
• Completion Sound: A satisfying ascending scale plays when sorting completes.

Visual Options

• Show Bar Values: Display the numeric value on each bar. Helpful for small arrays when you want to track specific numbers.
• Rainbow Mode: Color bars based on their value (HSL color mapping). Creates beautiful visual patterns, especially during Radix and Bucket sorts.
• 3D Mode: Add depth perspective to the bar visualization. Purely aesthetic but provides a fresh visual experience.
• Colorblind Modes: Protanopia and Tritanopia-friendly color schemes ensure accessibility for users with color vision deficiencies.

Save/Load System

Preserve your arrays for consistent testing:

• Save Array: Store the current array state to browser localStorage. Persists between sessions.
• Load Array: Restore a previously saved array. Great for comparing how different algorithms handle identical data.

Keyboard Shortcuts

Power users can control the visualizer entirely from the keyboard:

Custom Arrays

Load your own data for sorting visualization instead of using randomly generated arrays. This feature is available in three modes with different size limits optimized for each use case.

Visualizer Mode (Max 500 Elements)

In the main Visualizer tab, expand "Advanced Options" to find the Custom Array section:

• Text Input: Enter comma-separated numbers directly (e.g., 5, 3, 8, 1, 9, 2)
• File Upload: Click "Upload File" to load from JSON, TXT, or CSV files
• Automatic Normalization: Values are automatically scaled to 1-100% for proper visualization

Compare Mode (Max 500 Elements)

Race algorithms on your own data instead of random arrays:

• Click the "📁 Load Array" button in the race controls
• All racers will use identical copies of your custom array
• Click the "✕" button to clear and return to random arrays

Benchmark Mode (Max 100,000 Elements)

For serious performance testing with real-world data:

• Select "Custom Array" from the Distribution dropdown
• Upload a file with up to 100,000 elements
• Benchmarks run at full speed without visualization delays

Supported File Formats

Benchmarking

The Benchmark tab provides objective performance measurements by running algorithms at full speed in a Web Worker (background thread). This ensures accurate timing without UI rendering overhead.

How Benchmarking Works

1. Array Generation: For each test run, a fresh array is generated according to your selected distribution (or your custom array is used)
2. Identical Copies: Each algorithm receives an identical copy of this array, ensuring fair comparison
3. Full-Speed Execution: Algorithms run without any visualization delays—measuring actual computational performance
4. Statistics Collection: Time (milliseconds), comparisons, and write operations are tracked precisely
5. Multiple Runs: If you specify multiple test runs, results are averaged for statistical significance

Configuration Options

Understanding the Score

Benchmark scores are based on relative speed: the fastest algorithm in a run gets 100, and others are scaled proportionally by average time.

Exporting Results

After benchmarking, export your results for further analysis:

• CSV Export: Spreadsheet-compatible format for Excel, Google Sheets, or data analysis tools
• JSON Export: Structured data format for programmatic analysis or archival
• Export Average vs All: Choose to export averaged results or individual run data

Algorithm Race (Compare)

The Compare tab runs up to 25 algorithms on identical input arrays in synchronized panels, enabling direct visual comparison of completion speed and operation profile.

Features

• Live Statistics: Each panel shows real-time comparison and write-operation counts.
• Finish Detection: Panels turn green when their algorithm completes.
• Ranking: Gold, silver, and bronze badges appear for the top 3 finishers.
• Pause/Resume: Pause the race at any point to analyze current state.

Custom Algorithms

The Custom tab is a sandbox for authoring and validating user-defined sorting logic with worker-isolated execution and operation logging for deterministic playback.

Supported Languages

• JavaScript: Runs natively via Web Workers.
• Python: Backed by Pyodide (Python via WebAssembly).
• C#: Experimental lightweight syntax translation in the worker runtime.
• Blockly (Visual Logic): Build sorting logic visually with blocks for easier intuitive learning.

Available API

Collapsible Console

The integrated console surfaces runtime logs and exception messages from the sandbox to support efficient debugging and iteration.

Bubble Sort

Repeatedly steps through the list, compares adjacent elements, and swaps them if they are in the wrong order. Named because smaller elements "bubble" to the top. A classic educational algorithm, but rarely used in practice due to poor cache locality.

Selection Sort

Finds the minimum element from the unsorted part and puts it at the beginning. Simple but inefficient for large lists. Makes the minimum possible number of swaps, making it useful when write-operations are extremely expensive.

Double Selection Sort

Selects both the minimum and maximum in each pass, placing them at the beginning and end respectively. Approximately 2x fewer passes than standard selection sort. Optimizes the standard selection sort by simultaneous bounds-finding, cutting pass count in half.

Insertion Sort

Builds the sorted array one element at a time by inserting each element into its correct position. Very efficient for small or nearly sorted data. Highly efficient for nearly-sorted data and small arrays, often used as the base case for complex algorithms.

Cocktail Shaker Sort

A variant of bubble sort that traverses the list in both directions alternately. Helps avoid the "turtle" problem (small values at the end). Eliminates the 'turtle' problem seen in Bubble Sort by traversing bidirectionally.

Gnome Sort

Works like a garden gnome sorting flower pots — moves forward when things are in order, steps back to fix when they are not. Combines the simplicity of Bubble Sort with tracking mechanisms of Insertion Sort.

Odd-Even Sort

Alternates between odd-indexed and even-indexed passes, comparing and swapping adjacent pairs. Originally designed for parallel processors. Lends itself exceptionally well to parallel processing architectures.

Cycle Sort

Theoretically optimal in terms of writes. Minimizes the total number of memory writes by rotating elements into their correct positions. Theoretically optimal for minimizing memory writes, making it ideal for EEPROM or Flash memory.

Pancake Sort

Sorts by repeatedly flipping sub-arrays, like arranging pancakes by size. Only uses a "flip" operation (reversing a prefix of the array). Restricted to only performing prefix reversals (spatula flips).

Comb Sort

Improves on bubble sort by using a gap that shrinks by factor 1.3 each pass. Eliminates turtles (small values near end) much faster. Uses an optimized shrink factor (typically 1.3) to efficiently eliminate small values near the end.

Strand Sort

Pulls sorted "strands" from the input and merges them into the output list. Very efficient for partially sorted data. Particularly effective when dealing with linked lists rather than arrays.

Bingo Sort

Selection sort adapted for duplicates. A variant of selection sort that optimizes heavily for duplicate items.

Exchange Sort

Systematic comparisons globally. Often confused with Bubble Sort, but performs systematic global comparisons instead of local ones.

Merge Sort

Divides the array in half, sorts each half, then merges them. Guaranteed O(n log n) performance regardless of input. A textbook example of the divide-and-conquer paradigm, ensuring reliable O(N log N) performance.

3-Way Merge Sort

Splits into three parts instead of two. Slightly fewer comparisons than standard merge sort in theory. Reduces tree depth by branching into thrids, though offset by extra comparison overhead.

Quick Sort

Picks a pivot, partitions around it, and recursively sorts the partitions. One of the fastest general-purpose sorts in practice. Employs an elegant partitioning scheme that exhibits excellent cache locality.

Dual-Pivot Quick Sort

Uses two pivots to partition into three segments. Used by Java Arrays.sort() for primitives. Fewer swaps on average. Significantly reduces recursive depth and handles duplicate keys robustly.

IntroSort

Starts as quicksort, switches to heapsort if recursion gets too deep, and insertion sort for small partitions. Used by C++ STL. Achieves fast average performance while strictly capping worst-case limits.

Heap Sort

Builds a max-heap from the array, then repeatedly extracts the maximum. Guaranteed O(n log n) with no extra memory. Converts the array into a maximum priority queue, completely avoiding extra memory usage.

Shell Sort

Generalizes insertion sort to allow exchanges of elements far apart. Uses a decreasing sequence of gap values. Generalizes insertion sort by introducing a gap sequence to move items over long distances initially.

Tim Sort

Hybrid of merge sort and insertion sort. Finds natural runs, extends them, and merges with a sophisticated merge strategy. Used by Python and Java. Exploits natural runs in real-world data to perform incredibly fast sorting with minimal overhead.

Bitonic Sort

Creates bitonic sequences then merges them. Highly parallelizable — designed for hardware implementations and GPU sorting. Sorts independently of input data variations, maintaining a rigid sequence of comparisons.

Circle Sort

Compares elements equidistant from both ends, swapping if out of order. Repeats until no swaps needed. Simple and elegant. Operates iteratively by applying concentric comparisons, producing a non-obvious visual pattern.

Smoothsort

A variation of heapsort. Operates via a Leonardo number heap structure to seamlessly degrade to O(N) for nearly sorted inputs.

Patience Sorting

Distribution sort using card game patience rules. Constructs 'piles' obeying specific rules to naturally identify the longest increasing subsequence.

Tournament Sort

Similar to heapsort, builds a tournament tree. Utilizes a binary tree framework to simulate a knockout tournament.

Tree Sort

Builds a binary search tree and traverses it. A pure manifestation of Binary Search Tree construction and in-order traversal.

Block Sort

Stable sort. Extracts strictly O(1) auxiliary space performance out of merge routines via complex rotations.

Pattern-Defeating Quicksort

Modern hybrid. A state-of-the-art unstructured hybrid combining dual-pivot Quick Sort with block swaps.

Library Sort

Gapped insertion sort. Implements a strategy akin to a librarian leaving empty shelf spaces for future books, preventing cascading shifts.

Drop-Merge Sort

Adaptive based on drops. Heavily adaptive algorithm that simply 'drops' out-of-order elements, sorts them, and merges them back.

Cartesian Tree Sort

Min priority queue sort. Relies on a Cartesian tree builder to quickly determine minimum spanning elements.

Weak-Heap Sort

Minimizes branches. Modifies the heap property to loosen structural constraints, slightly reducing comparison counts.

Ford-Johnson

Merge-insertion for minimum comparisons. Aims for the theoretical absolute minimum comparisons for a given N.

Batchers Odd-Even Mergesort

Sorting network style. Transforms a sequential merge step into a parallelizable network of comparators.

Counting Sort

Counts occurrences of each value and uses arithmetic to place elements. Very fast when the range k is not much larger than n. Abandons comparisons entirely by trading massive memory arrays for incredible linear time performance.

Radix Sort (LSD)

Sorts by processing digits from least significant to most significant, using counting sort as a subroutine. Separates processing into individual digit buckets, avoiding any direct whole-element comparisons.

Radix Sort (MSD)

Like LSD Radix Sort but processes from the most significant digit first. Can short-circuit on already-sorted data. Works top-down on digits, allowing early termination on variable-length keys.

Bucket Sort

Distributes elements into buckets, sorts each bucket individually (usually with insertion sort), then concatenates. Splits elements across a set of uniformly distributed continuous numerical ranges.

Gravity (Bead) Sort

Simulates beads falling under gravity on an abacus. Each value is represented as a row of beads that drop into place. Simulates beads sliding down rods affected by gravity to naturally clump sorted states.

Pigeonhole Sort

Distribution sort suitable when number of elements and range of possible values are roughly the same. A pure demonstration of the pigeonhole principle mapped to indexing spaces.

Flashsort

Efficient distribution sort. Guesses element locations through statistical interpolation, yielding linear performance for uniform data.

Stooge Sort

Recursively sorts first 2/3, last 2/3, then first 2/3 again. Named after The Three Stooges. Extremely slow — purely educational. Employs an outrageously slow, recursive 2/3 overlap strategy resulting in O(N^2.7) time.

Sleep Sort

Sort by timeouts. Offloads the computational effort entirely to the OS scheduler by setting timers.

Slowsort

Multiply and surrender. Pessimizes a divide-and-conquer strategy, generating an aggressively inefficient O(N^(log N)) execution.

Stalin Sort

Eliminates out of order elements. Ruthlessly executes any element that violates the sorted order. O(N), but destructive.

Bogo Sort

Randomly shuffles the array and checks if sorted. Expected time is factorial. Also known as "stupid sort" or "monkey sort". Use with very small arrays only. Continuously randomly shuffles the array until it happens to be sorted.