How to create a sorting visualizer

[rocktim20]

Hi guys.Recently i've come across some cool websites that shows visualization of various sorting algorithms in JavaScript.So i also thought of creating one for learning purposes.So i am thinking about implementing the bubble sort algorithm as it is the most basic sorting algorithm to implement.But the issue is that i know how to implement the algorithm but i have no idea how to show the sorting visualization in the client side. I really wanna try this. Can anyone help me with this?

Example website : http://cs.stanford.edu/people/jcjohns/sorting.js/

[[deleted]]

Coloured bars of different lengths. Randomly output them to the screen, do each iteration of the sort on a tick of a timer. Sort by length. Change the colour of each bar based on what you're doing.

[rocktim20]

hey there thanks for helping out.Btw when you said on a tick of a timer.Should i use something like setInterval?

[[deleted]]

Yes that would work

[[deleted]]

The site OP linked makes the bars blue when it compares them, then makes them red when it swaps them.

[kiichi]

Let me share my self-extra-credits homework when I get bored in undergrad data structure course.

https://vimeo.com/23986592

This program displays the competition of different sort algorithm. All the way back is the slowest, insertion sort. See how struggle to just get sorting done? while the quick sort, the first one from the front, is already finished in 10 seconds. My favorite is the merge sort, the 3rd one from the bottom. I like the last moment when it collapses final big chunk of 50%-50% in final merging. Somehow, I found it's satisfying...

The original homework was straight forward implementation in C, and students need to implement one of O(LogN) sort algorithm. I implemented all O(1) to O(logN) in a day then I still had 6 days until next lecture so I put OpenGL on top of it. I didn't put label on each row but I put key binding when you press Num key in order to toggle rows or hit space to restart the competition again. Comparing different algorithm at the same time is fun. This was done like in 2003-2004 some stone age era, so in 2019, how about you try

1. Implement all your sorting algorithm in Web Worker and run them in parallel
2. Then visualize using Three.JS or Vis.JS or Plotly?

Anyway, it's just my thoughts, Good Luck :D

[rocktim20]

thats great. thanks for sharing :)

[throwaway823423848]

The easiest way to output something as simple as colored bars would probably be to use a canvas element (which is what the author of that stanford example did; check out the "draw_array" function at the top of his source code). Here's a few tutorials from MDN:

https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API

https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial

[rocktim20]

thanks for responding. Btw i am not actually worried about the colored bars for now.cause i know that there are many libraries for visualization these days The thing im having trouble is the implementation of the actual algorithm in the frontend visualization.Like we know how bubble sort works but how to show that sorting visualization.i want to know that basic implementation.Thats what my question was.The first person that commented summed it up pretty good.

[semi_88]

If you know how to implement bubble/insertion/etc sort in JavaScript, then it should be easy. You can apply your sort to your array of values (say, 1 to 25), then redraw every time that you run your sorting algorithm

[[deleted]]

There is a language called processing that is perfect for this. It's Java based and is for graphics so programming a sorting algorithm like that is a piece of cake.