Seeing Sorting

By Jackson Hammond

Learning sorting is hard. The algorithms and their Big-O notation take lots of practice to understand, but all new CS students need to learn them. It's like eating your vegetables 🥕🥦🌽🥬

Use this tool to help with those studies. It uses bar charts to illustrate data arrays as they're being sorted. Array elements that are being compared are purple, and elements being swapped are green. The line charts help show both the time and the cost an algorithm takes to sort an array.

Details of an Algorithm

Choose an algorithm below to read more about how it works, view its pseudo code, and watch it sort an array step by step.

Read More

Algorithm Comparison

Choose two algorithms below and click "Compare" to watch how their performance compares to one another. Once they're both completed click "Reset" to shuffle the arrays and start again.

/

Author Info

Created and Designed by Jackson Hammond, SI 649 Individual Project Fall 2019.

Sources and Citations

All the sources I collected code and other information from are listed below for reference.

I borrowed much of javascript code that handles the actual sorting of the arrays from Justin Johnson. His "AnimatedArray" object and subsequent sorting code is what drives much of the background computation for this project. See citations below for more information.

  • index.html. sorting.js, commit d8d7a1a30c00fde2456acc1063d5e22929378681, Justin Johnson, 2015. GitHub, https://github.com/jcjohnson/sorting.js/blob/master/index.html
  • sorting.js. sorting.js, commit d8d7a1a30c00fde2456acc1063d5e22929378681, Justin Johnson, 2015. GitHub, https://github.com/jcjohnson/sorting.js/blob/master/js/sorting.js

Below is a formal listing of sources for all the sorting code explanations and pseudocode.

  • "Bubble sort." Wikipedia, https://en.wikipedia.org/wiki/Bubble_sort. Accessed 2 November 2019.
  • "Selection sort." Wikipedia, https://en.wikipedia.org/wiki/Selection_sort. Accessed 2 November 2019.
  • "Data Structure and Algorithms Selection Sort." TutorialsPoint, https://www.tutorialspoint.com/data_structures_algorithms/selection_sort_algorithm.htm. Accessed 2 November 2019.
  • "Insertion sort." Wikipedia, https://en.wikipedia.org/wiki/Insertion_sort. Accessed 2 November 2019.
  • "Odd-even sort." Wikipedia, https://en.wikipedia.org/wiki/Odd%E2%80%93even_sort. Accessed 2 November 2019.
  • "Cocktail shaker sort." Wikipedia, https://en.wikipedia.org/wiki/Cocktail_shaker_sort. Accessed 2 November 2019.
  • "Quicksort." Wikipedia, https://en.wikipedia.org/wiki/Quicksort. Accessed 2 November 2019.
  • "Heapsort." Wikipedia, https://en.wikipedia.org/wiki/Heapsort. Accessed 2 November 2019.
  • "Merge sort." Wikipedia, https://en.wikipedia.org/wiki/Merge_sort. Accessed 2 November 2019.
  • "Data Structures - Merge Sort Algorithm." TutorialsPoint, https://www.tutorialspoint.com/data_structures_algorithms/merge_sort_algorithm.htm. Accessed 2 November 2019.
  • "Introsort." Wikipedia, https://en.wikipedia.org/wiki/Introsort. Accessed 2 November 2019.