Visualizing sorting algorithms

Reading Time: 2 minutes

Currently, I am going through course JavaScript Algorithms and Data Structures (which I highly recommend by the way). For me, one of the strongest parts of this course was Colt ability to explain everything, not only how to implement code, but also what exactly one or other part is doing. Among all instruments used there, one of my favourites were ones, that visualize what is happening, when sorting algorithms are run. I have collected all there of them here, as I think they are very good educational instruments, and I hope that someone (maybe you 🙂 ) will discover them in this post and will use them or for self-education or to educate others.

  1. This is a nice video, and even though, that it doesn’t have a strong explanation side, I think, that if someone never tried to visualize what actually is happening while sorting algorithms working, it can make that “WOW” effect, and encourage to learn more. https://www.youtube.com/watch?v=kPRA0W1kECg

  2. Nice tool to compare how algorithms perform in different case scenarios (for example, an array is sorted, an array is sorted, but reverted, an array is nearly sorted etc.). The tool is comparing insertion, selection, bubble, shell, merge, heap, quick and quick3 algorithms. https://www.toptal.com/developers/sorting-algorithms

  3. This is a great tool, that runs different sorting algorithms over example, step by step. It allows seeing what exactly is happening at each step of the algorithm. There is possible to see what happen in bubble sort, selection sort, insertion sort, merge sort, quick sort, random quick sort, counting sort, radix sort algorithms. https://visualgo.net/en/sorting. By the way, this source contains much wider tools for the visualizations other different algorithms and data structure, check root link for this https://visualgo.net/

  4. Secret forth in this list 🙂 Did you ever thought, what a great visualization tool dev tools can be? It is possible to see how any algorithms are performed step by step using regular Google Chrome DevTools 😉

Do you have your ways to explain algorithms sorted?

If you have found a spelling error, please, notify us by selecting that text and pressing Ctrl+Enter.

Olena Sovyn
Staff Software Engineer (London, UK). I ❤ React, Redux, lodash, React Storybook, and functional programming overall. Always open to learning something new

Leave a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Spelling error report

The following text will be sent to our editors: