Visualizations of common sorting algorithms using d3.js
Switch branches/tags
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.

Sorting Algorithm Visualizations

Live Demo

This repository hosts active visualizations of sorting functions using d3.js.

Time Complexity

It should be noted that the time it takes to sort the bars is not necessarily directly correlated to the time complexity of the sorting function in question. This is due to the way the data mutations have been synchronized with animations using d3.js. These should be used only to visualize the mechanisms that make each sorting algorithm unique.

Algorithms Covered

  • Bubble Sort
  • Selection Sort
  • Insertion Sort
  • Merge Sort
  • Quick Sort


Bubble, Selection, and Insertion sort all perform the sort of the dataset, and animation in lock step. This means the dataset is being sorted while the animations happens.

Merge and Quick sort are more complicated algorithms that instead build a history of the dataset throughout the sort in order to visualize it after the fact. These ideas came directly from Mike Bostock, the links are in the js for each sort feature to his original solution. The goal is to find a way to perform these sorts in lock step like the other 3.