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.

845
41
142
306
296
423
925
225
389
413
864
616
12
583
456
77
577
295
145
932
772
718
768
343
834
321
34
144
354
94
268
103
549
583
598
860
678
710
288
913
741
841
720
634
651
259
176
32
264
161
745
363
871
589
760
857
808
544
315
708
88
1
806
719
341
703
344
379
556
432
470
260
87
776
110
200
139
498
668
440
231
955
621
1
29
442
25
744
403
570
809
309
346
974
657
424
814
334
393
801
BubbleSort - 0 steps
936
591
655
367
884
988
38
706
592
844
566
420
769
684
926
835
487
209
846
198
864
247
445
183
876
780
308
868
839
561
905
56
214
203
596
864
437
209
707
130
766
700
499
505
68
109
823
925
915
315
256
607
563
768
32
746
672
846
237
949
406
711
350
571
141
154
165
999
981
126
484
576
84
267
610
819
212
912
746
977
633
272
996
279
776
888
920
688
462
563
572
52
668
949
300
391
954
941
464
819
InsertionSort - 0 steps
76
227
405
773
510
573
570
215
650
178
111
425
559
929
914
213
649
103
781
785
334
678
49
389
165
311
876
820
99
94
276
576
639
538
973
246
351
432
556
389
624
50
333
465
518
871
21
90
672
589
421
778
24
570
887
915
35
100
10
416
894
409
780
162
881
805
299
428
634
915
794
432
29
897
558
449
167
678
214
818
159
287
150
314
136
671
95
181
399
402
373
727
772
819
537
208
477
267
186
951
ShellSort - 0 steps
829
948
486
493
908
473
153
719
27
523
866
933
488
918
60
616
173
807
384
233
235
418
565
739
253
110
603
531
449
636
310
794
148
402
418
10
945
962
683
842
562
64
125
272
393
474
355
340
534
360
264
23
155
483
414
306
381
371
472
731
494
731
491
731
231
128
959
199
794
651
545
878
343
505
8
315
841
100
500
282
59
206
122
247
374
590
6
774
259
873
593
188
389
481
644
974
829
90
651
713
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