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.

833
203
407
543
303
804
787
319
423
41
675
713
633
76
16
798
671
32
10
691
1
954
722
749
267
671
844
45
461
153
876
516
826
993
974
801
25
928
432
776
234
182
677
392
353
623
883
328
378
20
341
873
562
340
166
471
559
74
872
7
44
823
824
204
101
842
385
404
521
8
502
315
477
642
850
647
17
81
131
452
121
361
336
278
261
569
490
231
62
354
611
983
462
874
224
200
163
62
418
197
BubbleSort - 0 steps
612
291
983
909
506
99
810
255
611
661
359
94
393
473
842
115
976
449
470
738
847
609
750
15
355
618
717
777
56
58
731
903
85
142
111
814
337
133
490
610
765
367
813
900
808
995
323
98
959
621
637
576
622
556
842
695
410
833
848
592
685
133
955
125
371
608
836
852
485
771
307
356
415
435
3
30
411
864
988
147
226
708
472
589
803
647
170
976
732
315
658
213
522
976
168
814
724
385
951
234
InsertionSort - 0 steps
127
74
271
213
330
412
563
948
224
818
97
474
564
709
172
842
183
181
954
566
844
548
422
765
802
649
357
613
318
850
79
465
626
153
701
188
532
339
398
844
846
738
806
298
850
1000
551
72
537
231
712
575
640
223
6
880
27
108
612
932
392
626
229
548
873
353
204
220
871
52
628
703
794
734
683
826
51
265
2
292
267
232
105
306
503
873
421
827
413
730
792
862
409
852
529
829
968
180
228
404
ShellSort - 0 steps
921
496
311
43
228
216
749
285
783
913
472
619
611
813
49
588
24
133
658
428
815
820
121
703
766
185
470
474
631
319
173
296
737
827
527
993
230
14
69
241
444
629
808
209
254
323
771
114
711
201
30
270
475
981
990
645
770
450
300
962
179
647
680
656
156
381
789
805
151
330
121
747
824
751
510
464
384
878
5
511
995
540
937
979
603
51
753
287
754
985
206
964
251
53
710
973
191
963
24
363
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