Animations - Bubble vs Selection vs Insertion

HOME - sort page

Comparision of the sort mechanisms which are included in the NSW HSC Software Design & Development syllabus:

Bubble Sort

Selection

Insertion sort

An example of bubble sort. Starting from the beginning of the list, compare every adjacent pair, swap their position if they are not in the right order (the latter one is smaller than the former one). After each iteration, one less element (the last one) is needed to be compared until there are no more elements left to be compared. Selection sort animation. Red is current min. Yellow is sorted list. Blue is current item A graphical example of insertion sort. The partial sorted list (black) initially contains only the first element in the list. With each iteration one element (red) is removed from the input data and inserted in-place into the sorted list
Animation of a bubble sort of the numbers 1 - 8 Animation of a selection sort of the numbers 1 - 8 Animation of an insertion sort of the numbers 1 - 8
WikiMedia: good graphics

WikiMedia:

WikiMedia: good graphics
Wikipedia:

Wikipedia:

Wikipedia: Selection sort
W3 resource: JavaScript W3 resource W3 resource: JavaScript


Bubble info: pseudocode and flow chart - Samuel Davis Text for Software Development & Design, Yr 12 Ch4 P's 170-171. Diagram of passes for the default animals should agree with the result above.

Selection info: pseudocode and flow chart - Samuel Davis Text for Software Development & Design, Yr 12 Ch4 P's 166-167. Diagram of passes for the default animals should agree with the result above.

Insertion info: https://www.w3resource.com/javascript-exercises/searching-and-sorting-algorithm/searching-and-sorting-algorithm-exercise-4.php.