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.

713
223
229
416
497
312
26
171
535
445
625
807
167
785
765
181
87
632
202
170
353
692
44
702
42
4
478
705
60
95
230
992
332
381
922
379
258
627
815
61
850
328
135
850
880
83
52
923
746
363
958
188
768
606
331
127
216
862
434
956
159
279
251
736
444
842
166
269
625
497
637
364
962
807
496
741
719
316
589
613
768
269
158
9
987
569
125
972
547
162
910
963
819
42
536
12
474
510
866
464
BubbleSort - 0 steps
1
238
990
97
941
692
971
608
179
609
818
579
708
753
831
583
773
318
500
228
282
203
646
518
738
95
659
901
452
45
949
159
817
418
170
502
182
956
297
36
369
199
822
158
979
830
538
21
208
46
387
127
665
269
77
363
544
252
707
664
739
980
583
165
380
728
656
887
148
189
791
959
500
239
373
688
780
751
982
430
947
688
619
261
630
403
985
444
459
307
286
303
191
501
678
798
43
817
409
246
InsertionSort - 0 steps
207
956
112
312
749
879
902
21
752
589
750
337
178
771
699
541
879
257
506
992
577
727
858
336
617
650
80
311
437
778
981
651
841
150
401
803
874
568
342
978
68
561
608
446
132
127
306
194
974
761
729
398
565
568
241
377
414
53
99
288
721
568
870
938
49
775
801
303
981
275
88
854
855
818
84
284
113
166
567
563
384
508
475
776
635
684
724
961
440
532
379
484
675
973
550
671
580
342
845
470
ShellSort - 0 steps
193
587
610
895
305
833
387
225
284
586
262
378
567
400
960
221
374
326
873
759
756
498
476
420
605
109
198
588
484
443
249
66
933
587
542
914
769
472
13
308
299
902
117
933
288
603
839
827
167
84
345
929
151
461
168
662
999
325
964
998
887
808
919
180
947
112
585
197
26
430
581
19
365
119
534
939
616
112
674
113
519
112
821
506
562
669
831
81
448
113
295
169
969
441
854
526
293
4
170
83
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