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.

233
616
644
106
999
492
370
275
970
527
91
818
234
10
258
797
404
240
275
535
286
166
938
184
367
701
833
50
611
304
916
799
365
331
123
513
166
935
553
756
961
86
799
947
646
428
537
741
961
329
209
232
962
661
285
900
370
658
298
314
388
289
432
88
672
829
437
227
368
668
967
204
726
580
377
689
750
279
776
392
755
103
514
192
126
833
328
713
510
136
183
142
5
389
544
590
409
719
133
282
BubbleSort - 0 steps
912
57
341
643
217
710
453
728
297
465
894
527
745
278
246
507
101
141
989
873
842
138
122
44
407
443
552
323
995
773
855
59
19
669
104
431
65
92
270
49
449
325
855
485
223
934
808
783
459
572
242
509
166
103
871
943
282
325
443
931
326
364
225
954
890
225
373
621
608
845
680
191
478
591
942
413
785
514
859
917
145
708
123
795
745
470
822
351
227
916
183
767
455
289
530
332
236
437
721
491
InsertionSort - 0 steps
46
682
561
636
527
98
436
790
920
614
110
70
364
323
140
793
301
83
85
238
230
779
200
419
369
657
583
995
202
849
90
264
327
423
96
657
913
364
326
598
383
403
480
854
9
71
418
920
359
921
238
111
52
233
468
736
641
150
997
42
198
202
672
179
218
477
318
737
620
719
339
718
309
534
93
384
809
639
412
499
648
172
477
481
826
986
603
893
243
948
176
49
684
278
901
293
744
508
276
695
ShellSort - 0 steps
593
599
350
915
196
633
553
986
673
239
233
458
289
497
230
565
870
628
258
508
295
261
118
78
404
229
220
227
155
967
167
407
989
82
551
353
178
115
400
197
413
726
176
563
431
265
583
945
379
257
621
155
973
285
768
591
878
374
586
45
648
82
956
620
208
531
510
154
948
291
461
360
408
130
637
548
658
44
478
825
680
99
830
482
296
275
258
904
448
138
677
512
551
826
585
170
656
656
207
633
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