skip to content

JavaScript: Sorting Algorithm Comparison

In this article we present a visualizaion of four different JavaScript DHTML sorting classes all of which have been described in more detail in previous articles.

Sorting Algorithm Visualization

Below you will see four scrambled versions of the same image. When you use the controls below to 'solve' the puzzles they will each use a different sorting algorithm as indicated - Bubble, Insertion, Shell and Quick Sort - to rearrange the pieces.

You can watch in real time as the sorting takes place and see an updating counter of the number of steps taken so far - where a 'step' is the process of exchanging two puzzle pieces.

964
677
197
183
803
646
71
391
603
512
486
574
338
7
935
801
883
524
603
63
527
642
140
105
57
264
460
977
781
828
360
694
681
328
728
381
741
278
584
844
604
765
227
438
616
599
825
76
114
838
31
67
677
207
802
241
276
888
529
246
594
882
601
471
200
154
412
214
506
204
12
675
974
293
302
347
201
925
264
562
354
296
123
832
834
909
716
611
828
49
208
298
369
364
81
126
12
876
165
516
BubbleSort - 0 steps
666
687
804
201
602
839
294
659
445
669
501
542
804
170
514
117
815
560
327
988
841
30
470
136
748
642
590
437
278
479
732
605
808
468
842
168
547
4
949
41
344
631
616
316
420
662
396
984
991
1000
730
725
284
642
249
155
760
842
813
632
869
398
722
847
778
619
242
652
482
535
505
766
353
188
425
906
186
76
635
457
678
201
701
119
202
662
948
93
426
252
361
482
734
888
387
144
443
179
234
688
InsertionSort - 0 steps
768
841
226
821
125
897
639
838
65
944
517
710
814
144
74
133
500
721
106
248
948
430
36
707
512
597
935
231
849
24
28
716
290
606
891
976
726
344
665
573
206
745
709
820
323
652
64
474
494
972
833
976
458
648
982
212
54
747
783
642
32
685
955
121
522
967
754
552
172
33
106
422
928
728
433
253
557
17
543
954
793
991
82
448
378
270
249
557
570
871
622
715
888
208
883
22
751
897
867
923
ShellSort - 0 steps
420
723
717
968
563
318
421
869
272
346
730
674
640
15
61
832
718
949
841
452
667
504
782
237
522
721
701
982
758
314
343
467
167
666
219
549
67
514
215
642
864
693
142
803
206
695
381
542
384
202
531
182
131
637
158
538
536
132
366
32
641
181
6
312
646
456
920
79
280
155
351
178
107
661
67
325
244
769
391
390
981
87
966
155
193
109
430
285
677
672
881
285
25
389
837
790
677
727
52
935
QuickSort - 0 steps
Controls 1) Select an image; 2) Click 'SOLVE'. * images generated by Stable Diffusion and Midjourney

All of the sorting is powered by JavaScript in your web browser so there is no load at all on the web server. There is also only a single background image being used each time - they haven't been sliced up into smaller squares for the puzzle.

While there are other methods for shuffling and sorting values, the advantage of DHTML sorting - rearranging actual HTML elements within the DOM - is that it preserves any event handlers or other dynamically assigned properties that may have been assigned to the elements.

This is possible because we are working with a 'live' NodeList which means that "changes in the DOM automatically update the collection."

Comparison of Results

As expected, the Bubble Sort and Insertion Sort algorithms are relatively slow requiring a large number of steps to solve the puzzle. This is mainly down to the fact that they can only swap adjacent squares.

The Insertion Sort and Quick Sort algorithms are significantly faster thanks to their more advanced algorithms requiring only a fraction of the number of steps each time to reconfigure the puzzle pieces.

We generally use the Shell Sort algorithm which, despite being slightly slower, is a stable sort, whereas Quick Sort is unstable (a sorting algorithm is said to be stable "when two objects with equal keys appear in the same order in sorted output as they appear in the input unsorted array").

What do we use if for?

Apart from these fascinating visualizations we typically use JavaScript DHTML sorting when presenting tabular data. It allows us to have the table contents sorted by various values on demand without needing to re-request data from the web server.

You can see some examples of this in earlier articles on the subject. The code used here for the visualization has been adapted slightly to insert a delay, but is otherwise identical to the code presented there.

We were able to insert delays into the sorting process by converting the exchange step to use a generator function which is then called repeatedly by setInterval. Generators have the effect of allowing you to 'pause' and 'resume' execution within a function.

Another interesting use case would be maintaining a 'pole position' graphic where race data was being dynamically inserted into the page and the task was to keep the list in the right order - perhaps with a touch of animation.

If you find a use for this code in your website or project please let us know using the comments button below.

< JavaScript

Post your comment or question
top