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.

165
112
646
288
428
242
35
596
306
361
78
111
344
519
646
258
120
572
136
459
296
744
124
330
746
848
855
375
769
86
167
853
986
337
735
825
9
790
976
474
210
319
540
251
872
282
567
873
88
231
218
64
88
52
875
132
793
429
962
195
606
286
611
217
818
689
529
365
21
598
775
393
487
383
705
542
581
226
953
975
881
29
756
657
881
479
628
206
90
646
569
265
873
849
947
276
543
969
944
703
BubbleSort - 0 steps
419
812
206
756
11
206
505
411
671
756
170
848
871
598
974
377
379
432
188
243
345
797
64
85
289
865
724
864
273
3
815
485
788
626
970
469
635
949
151
829
252
604
652
76
11
609
659
329
38
526
569
595
8
550
65
214
302
571
48
453
756
604
968
819
21
274
206
383
403
290
602
156
148
178
439
398
991
432
325
668
160
191
18
580
42
596
209
702
519
772
318
598
557
491
326
356
260
454
550
133
InsertionSort - 0 steps
623
564
922
465
52
135
767
724
777
449
477
226
513
487
21
416
267
790
40
846
623
768
348
461
749
558
968
782
59
663
868
8
920
573
920
428
629
368
49
549
174
691
506
623
767
522
4
323
870
559
1
629
349
588
527
862
304
632
650
492
203
734
340
427
784
346
448
625
645
549
643
359
220
310
827
411
754
752
470
793
702
331
782
263
252
790
251
358
535
191
92
840
866
867
405
97
846
130
69
21
ShellSort - 0 steps
71
710
528
20
918
19
333
329
98
773
574
909
860
146
485
785
85
886
414
584
543
274
612
995
338
524
151
719
278
545
532
222
191
301
266
517
694
871
465
134
348
681
645
745
950
755
59
454
144
93
198
538
691
469
402
78
948
941
313
941
999
986
563
188
873
305
175
883
770
927
939
869
382
308
934
655
224
75
166
138
389
134
932
104
25
168
616
914
432
660
312
795
51
387
829
111
417
176
663
90
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