▥ AlgoScopeDSA Algorithm Visualizer
ALGORITHMS, MADE VISIBLE

Less memorizing.
More understanding.

Turn abstract code into something you can see.
Pick an algorithm, press play, and follow every move.

Bubble sort

Ready to explore
UnvisitedActiveSettled / found
✦

Ready.

Step 0 / 0
COMPARISONS0
ARRAY WRITES0
WORST-CASE TIMEO(n²)
AUXILIARY SPACEO(1)

The idea behind the movement

Try this

Try an already sorted array. How many comparisons does it take?

Counts are actual operations in this run. Big O describes growth as input size increases. Array writes exclude temporary buffers; space includes recursion.

PSEUDOCODE● LIVE TRACE

    Highlighted line follows the current operation.

    Next Move Mini game

    Be the algorithm. Should bubble sort swap the highlighted neighbors?

    Round 1 / 50 points

    Rule: compare from left to right. Swap only when the left value is greater than the right value. Equal values stay in place.

    Choose your next move. A correct answer earns 10 points.

    Curious? Start here.

    Ten common questions about algorithms, the visualizer and your next step. Select a question to open or close its answer.

    1. What does DSA mean?

    DSA means Data Structures and Algorithms. A data structure organizes information, like a list of numbers. An algorithm is a set of steps used to solve a problem, like arranging that list from smallest to largest.

    2. Do I need to know coding to use AlgoScope?

    No. Start with Bubble sort and press Step. Read the message beneath the bars to understand each action. The “Start here” guide explains unfamiliar terms with examples, so you can learn before writing code.

    3. What is the difference between sorting and searching?

    Sorting puts values in order: [8, 3, 5] becomes [3, 5, 8]. Searching looks for a particular value, such as finding 5 in that list. Sorting changes the order; searching tells you whether a target is present and where it was found.

    4. What do the bars, colors and small index labels mean?

    Each bar represents a number; taller bars mean larger numbers. The index is its position, starting at 0. Muted indigo is the default, cyan shows active values, emerald shows settled positions or a found target, and orange marks quick sort’s pivot. In binary search, faded bars are outside the remaining search range.

    5. Which algorithm should I learn first?

    Try Linear search first: it checks one value at a time. Then try Bubble sort to understand comparisons and swaps. Once those feel familiar, explore Binary search, Insertion sort, Selection sort, Merge sort and Quick sort. Use the same numbers to see how their steps differ.

    6. Why does binary search sort my numbers first?

    Binary search needs sorted data so it can decide which half to discard. If the middle value is smaller than the target, the target can only be in the right half. AlgoScope sorts your input before showing the search. The displayed indices refer to that sorted array, and search counters exclude the sorting preparation.

    7. What do O(n), O(log n) and O(n²) tell me?

    They describe how an algorithm’s work grows when the input gets larger; n is the number of values. O(n) grows roughly with the input size. O(log n) grows slowly, as in repeatedly halving a search range. O(n²) grows roughly with the square of the input size. These labels are not seconds, and a slower animation does not mean a less efficient algorithm.

    8. Can I enter my own numbers or use repeated values?

    Yes. Enter 5–40 whole numbers between 1 and 100 in “Make it your own,” separated by commas or spaces, then click Apply array. For example: 8, 3, 3, 2, 6. Repeated values are allowed. For searching, set the search target to a number you want to find.

    9. How does the Next Move game work?

    Look at the two highlighted neighbors. Choose Swap them if the left value is greater than the right value; otherwise choose Keep this order. Equal values stay in place. Each correct answer earns 10 points across five rounds, for a maximum of 50. Every answer includes an explanation. Each round is a separate challenge; use the main visualizer to watch a complete sort.

    10. How can I turn this practice into programming skills?

    Pick one algorithm, explain its steps in your own words, then implement it in a language you know. Test sorted, reversed and repeated values, and check missing search targets. Compare your results with AlgoScope. For a project extension, add another algorithm or a new game challenge and explain how you tested it.

    Explore one idea at a time. You can reopen this guide anywhere.