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.

193
167
844
467
173
103
831
781
801
723
720
452
957
863
723
962
131
975
655
729
517
759
3
62
405
29
665
122
157
880
432
355
456
134
706
547
288
249
299
715
31
985
713
902
702
546
675
256
607
935
213
947
860
818
214
321
568
856
342
352
761
46
750
683
613
795
22
355
825
791
669
185
823
491
805
857
51
694
234
691
701
444
286
195
570
417
185
363
141
393
178
913
950
106
599
58
562
351
351
843
BubbleSort - 0 steps
558
947
316
608
278
434
852
897
648
758
395
181
409
997
107
764
311
765
715
138
733
236
370
760
318
455
255
515
898
873
666
595
992
763
415
607
803
364
567
15
521
619
936
803
732
751
317
60
253
964
176
667
73
371
549
259
103
962
477
693
928
455
238
699
788
202
785
747
535
213
210
946
544
402
948
797
892
813
959
359
724
322
99
521
609
219
321
25
35
670
741
235
630
50
64
88
946
910
433
760
InsertionSort - 0 steps
14
993
553
139
404
526
636
726
627
916
863
459
95
769
526
646
866
148
74
552
24
635
159
649
16
432
416
576
752
546
980
63
784
906
343
633
468
46
227
101
658
894
389
684
208
908
992
351
841
960
879
519
744
880
27
355
904
72
320
533
274
889
760
385
476
298
915
423
527
130
52
194
655
801
221
758
651
13
857
553
612
553
676
548
733
281
207
604
173
235
847
99
562
430
165
676
66
757
546
482
ShellSort - 0 steps
269
545
911
522
469
741
619
904
339
541
150
196
893
464
475
111
616
190
820
350
72
694
274
238
489
70
885
706
418
475
269
937
386
90
94
760
402
200
983
920
640
958
391
128
32
855
806
191
617
319
683
46
820
753
633
489
628
205
751
181
921
338
19
485
189
921
444
193
450
73
248
767
612
443
80
843
974
911
169
376
573
474
640
554
40
131
768
139
439
238
228
552
631
146
267
191
845
502
119
684
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