Remix Library / Techy

Sorting Visualizer

Watch bubble, insertion, selection, merge and quick sort race. Count every compare and swap.

Intermediate HTML · CSS · JavaScript
No account needed: you’ll start as a guest.
read-only · remix to edit
Preview

What you'll learn

  • Sorting algorithms
  • Generator functions (yield)
  • Big-O in practice
  • Recursion
  • Animating data

Challenges

Remix it, then try these. Each one is a bit harder than the last.

  1. Sort 100 bars with bubble sort, then with quick sort. How many compares does each take?
  2. Add a button that starts with bars already sorted backwards (the worst case for some sorts).
  3. Color the bars by height, like a rainbow.
  4. Add another algorithm: shell sort or heap sort.
  5. Run two algorithms side by side on the same bars and see which finishes first.