Algorithm visualizer for sorting and pathfinding

An algorithm visualizer animates an algorithm one step at a time, so you can see what it compares, what it moves and why it finishes when it does. Our algorithm visualizer, the Algorithm Visualiser, runs six sorting algorithms on a list of bars and four pathfinding searches on a grid you can draw on. Step forwards and backwards, watch the comparison and swap counts climb, and follow the running line in the real code, in JavaScript, Python or C.

Try it

Algorithm Visualiser

Watch sorting and pathfinding algorithms run step by step

Open the simulatorGo to its page

What it shows

• Sorting: bubble sort, insertion sort, selection sort, merge sort, quicksort and heap sort, on 4 to 64 items. The list can be random, nearly sorted, reversed, or have few different values.
• Pathfinding: breadth-first search, depth-first search, Dijkstra's algorithm and A* on a 28 by 16 grid. Paint walls, mud (which costs 5 to cross instead of 1), and move the start and end.
• Counts: comparisons and swaps for a sort, or cells visited, cells waiting and the path's steps and cost for a search, with each algorithm's big O.
• Code: the algorithm in JavaScript, Python and C, with the line that is running marked. You can edit the JavaScript and run your own version.

How to use the sorting visualizer

1. Open the Algorithm Visualiser. It opens on Sorting with quicksort on 24 random items.
2. Under Set up, choose the Algorithm, the number of Items and the kind of List.
3. Under Run, play it or step through one move at a time, forwards or back. A line of text says what each step does.
4. Switch the panel to Counts to see every sort's comparisons and swaps on the same list, side by side, or to Code to follow the program.
5. For pathfinding, switch to Pathfinding, pick a search and a map, and paint with the Wall, Mud, Rub out, Start and End brushes.

Sorting algorithms compared

A stable sort keeps equal items in the order they started in. Big O describes how the work grows as the list gets longer, not the exact count, which is why the counts below are worth seeing.

Experiments to try

Experiment 1: the same list, six sorts

On the opening list of 24 random items, the Counts panel shows:

Selection sort makes the most comparisons but very few swaps, because it swaps each item into place just once. Merge sort makes the fewest comparisons, but it writes items into a new list as it merges, so its writes are high.

Experiment 2: a nearly sorted list

Change the list to Nearly sorted. Insertion sort drops to 24 comparisons and bubble sort to 66, because almost everything is already in place. Quicksort jumps to 276 comparisons, its worst case: with an already ordered list, its pivot splits off just one item at a time. Big O's best and worst columns are about lists like this.

Experiment 3: how the work grows

With a random list, bubble sort makes 28 comparisons on 8 items and 1,961 on 64: eight times the items, about seventy times the work, as O(n²) predicts. Merge sort goes from 16 to 304, growing far more slowly, as O(n log n) does.

Experiment 4: pathfinding on an empty grid

Switch to Pathfinding and load the Empty map with the opening start and end. All four searches except depth-first find a route of 24 steps, but they work very differently: breadth-first search and Dijkstra visit 361 cells, spreading out evenly in every direction, while A* visits only 25, heading straight for the end because it adds a guess of the distance left. Depth-first search visits 203 cells and wanders a route of 202 steps, because it follows one way as far as it goes.

Experiment 5: mud

Load Mud. Breadth-first search still takes the fewest steps, 24, straight through the mud, for a cost of 64. Dijkstra and A* go round it: 34 steps but a cost of only 34, the cheapest route. Dijkstra visits 423 cells to be sure, A* only 119. Breadth-first search counts steps; Dijkstra and A* count cost.

Choosing a search is a common exam question. Try one, then press Mark to check your answer in the Search Algorithms course.

Running your own code

In the Code panel, choose JavaScript, press Edit, change the code and press Run code. Back to the original undoes your changes. The visualiser animates your version on the same list or map, so you can see whether your change helped. It runs in a safe sandbox in the browser. The Python and C versions are there to read and compare, not to run.

What it doesn't do

• Other algorithms. No shell sort, counting sort or radix sort, no binary search on a list, and no minimum spanning trees.
• General graphs. The searches run on a grid of cells, each joined to its four neighbours, not on a graph of nodes and edges you draw.
• Lists over 64 items, or your own list of numbers.
• Timing in milliseconds. It counts operations, which is what big O is about, rather than measuring speed on your computer.

Common misunderstandings

• "Quicksort is always fastest." On average it is quick, but its worst case is O(n²), as the nearly sorted list shows.
• "O(n²) means exactly n² steps." It describes how the work grows. Bubble sort on 24 items made 275 comparisons, not 576.
• "Breadth-first search finds the shortest route." It finds the fewest steps. When steps cost different amounts, you need Dijkstra or A*.
• "A* always visits fewer cells." Only when its guess of the distance left helps. In a maze it can visit nearly as many as Dijkstra.

Read next

Computer Science · Programming and algorithmsSorting algorithms: bubble, merge, quick sort and Big OHow the main sorting algorithms work: bubble, insertion, merge and quick sort, traced step by step, with time complexity and a visualiser to watch them.