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.

324
13
82
488
507
692
418
587
436
1
590
492
946
201
600
58
278
939
440
711
427
483
236
975
953
528
715
702
850
320
504
272
892
936
361
116
512
229
750
653
457
426
110
329
735
589
807
367
561
238
32
941
243
252
435
71
797
795
485
483
237
958
226
491
898
989
315
644
854
16
252
78
471
155
938
865
742
742
630
188
994
802
210
511
531
478
23
813
975
139
120
732
236
481
871
540
667
819
795
269
BubbleSort - 0 steps
87
209
182
360
540
347
612
340
246
332
743
923
199
488
180
354
889
959
37
886
24
97
793
791
566
968
999
357
812
797
476
716
507
137
945
17
107
55
552
508
417
814
237
417
247
643
275
151
999
907
941
847
674
70
928
179
941
123
798
945
817
154
628
604
482
383
141
3
184
17
440
117
494
674
785
296
446
164
833
143
4
43
411
716
568
75
972
435
10
974
206
529
531
662
824
42
805
340
331
70
InsertionSort - 0 steps
412
477
545
632
911
85
72
534
771
717
897
631
210
624
522
295
308
201
858
356
476
519
670
951
667
733
703
347
234
713
624
945
884
882
360
199
727
230
802
930
498
279
572
503
505
542
114
558
397
215
922
93
334
458
744
708
602
749
578
718
501
159
499
944
280
1000
343
767
641
849
470
301
421
999
96
694
339
64
277
589
667
703
643
209
937
715
397
742
646
399
588
915
12
867
762
289
195
951
975
578
ShellSort - 0 steps
435
504
763
321
3
630
415
41
975
595
250
34
574
782
634
884
164
247
460
147
720
810
713
278
470
692
413
817
724
854
173
100
588
355
371
698
968
822
513
89
292
380
617
224
249
62
460
354
888
923
64
23
433
51
96
304
547
564
277
838
878
115
271
286
239
696
464
420
100
163
395
314
955
601
448
494
787
300
636
427
241
940
570
840
133
449
789
9
507
694
709
984
897
372
732
544
313
596
452
198
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