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.

361
418
994
408
926
319
91
813
646
557
633
913
881
329
157
623
625
845
488
731
328
358
176
326
488
137
50
940
501
867
871
917
840
533
148
115
777
123
595
758
535
755
469
705
875
287
768
824
888
24
812
82
655
749
386
994
100
456
969
825
41
426
125
852
831
841
434
444
33
689
213
569
593
378
199
963
932
354
163
698
375
773
627
773
419
214
582
508
460
753
532
366
725
833
150
911
920
427
62
325
BubbleSort - 0 steps
857
318
589
872
87
848
474
766
32
782
388
244
185
363
144
736
391
906
783
477
114
676
789
45
17
277
930
241
924
578
568
270
226
468
923
167
131
555
852
899
465
366
412
913
457
835
816
533
194
97
740
170
896
333
112
710
606
968
207
929
13
81
156
789
630
918
196
308
614
864
763
474
35
964
223
35
122
510
554
362
427
651
291
496
940
832
581
405
252
278
631
573
611
432
183
282
547
284
703
953
InsertionSort - 0 steps
783
461
385
359
939
545
283
959
613
601
294
26
876
495
676
576
191
272
768
376
650
80
53
394
635
449
766
87
190
700
585
637
323
911
18
277
67
272
201
381
825
693
577
381
569
87
360
590
223
757
665
499
484
664
523
170
12
491
383
184
460
22
481
764
956
166
967
706
623
116
302
109
429
714
112
992
584
301
644
770
692
846
701
933
46
92
773
243
565
749
345
345
347
446
788
926
16
51
90
205
ShellSort - 0 steps
182
585
275
498
747
420
328
445
31
701
357
602
152
330
920
772
766
462
846
455
250
256
400
470
129
792
935
321
708
573
790
513
345
574
976
660
804
371
515
982
275
450
67
414
340
965
300
504
712
144
976
280
244
428
559
357
710
12
757
32
319
363
89
245
178
595
536
482
31
666
427
952
993
345
929
686
787
435
66
320
653
100
78
744
346
188
749
49
370
864
338
52
750
353
360
193
823
905
636
95
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