Interactive Visual Sorting

mszula 10 months ago | parent | next [-]

Hey all,

Author of the project here. Thank you for your warm words, and a bunch of feedback. I created the project mainly to learn about Svelte and play with algorithms, these running bars fascinate me. I was hoping that this tool would also help understand how sorting algorithms work. I still have a few features planned, such as advanced statistics.

If you have any ideas on how to develop this or want to contribute with me, I would be happy to invite you

I would also like to thank you for the stars on Github, it is really satisfying when someone enjoys the fruit of my work.

	▲	bowsamic 10 months ago \| parent \| next [-]
		It sounds like the audio waveform is simply cutting off rather than polyphonically fading in and out, which causes clicking on basically all the sounds. Especially noticable on the sine wave. I assume you are just changing the frequency instantly or something. It would sound far better to implement polyphony and have a basic short AD envelope that is triggered for each step and allow a tiny overlap at the end
	▲	dasefx 10 months ago \| parent \| prev \| next [-]
		Hi, thanks for this, you know what would be great? Being able to see the actual algorithm used in code somewhere in the UI, maybe when you select one algorithm display its related code in a panel below, and if you could also show in what step of the code is when animating,that would be mind-blowing.
	▲	gcanyon 10 months ago \| parent \| prev \| next [-]
		This is awesome! Is there a reason for the dramatic speed-up around delays of 1.8-2ms? On my machine Quick Sort takes 12 seconds at 2ms, about 6 seconds at 1.9ms, and just over 1 second at 1.8ms (with the default 300 items).
	▲	CoastalCoder 10 months ago \| parent \| prev [-]
		I love the site. Very well done! It wouldn't surprise me if it starts showing up in some undergrad CS lectures. The thing about the stars, though: some of us fear that a utility site for our work, GitHub, is getting enshitified into a social media platform. So for those of us in that camp, the stars system is unwelcome all by itself, and catering to it is the opposite of what we want to encourage. Your desire for feeling the work is appreciated is definitely reasonable though. I hope how much I like it comes across loud and clear :)

▲

johnchristopher 10 months ago | parent | prev | next [-]

Oooh, bogosort led me to https://en.wikipedia.org/wiki/Bogosort and divine sort:

Divine sort A sorting algorithm that takes a list and decides that because there is such a low probability that the list randomly occurred in its current permutation (a probability of 1/n!, where n is the number of elements), there must have been a reason for the list's order. Therefore, it should be considered sorted in a way we don't understand, and we do not have any right to sort it to our beliefs, as if it were sorted "as God intended." Also known as Intelligent Design sort.[11]

▲

smusamashah 10 months ago | parent | prev | next [-]

I also made a sorting visualizer based on a popular imgur sorting gifs gallery.

Demo https://xosh.org/VisualizingSorts/sorting.html

Post https://xosh.org/sorting-algorithms-visual-comparison/

Imgur gallery I was trying to replicate https://imgur.com/a/voutF

This also let you try out your own sorting algorithm too btw and share that in url. For example this algo https://xosh.org/VisualizingSorts/sorting.html#IYZwngdgxgBAZ... which was discussed at the time https://news.ycombinator.com/item?id=31975507

(Dont turn on sound, i dont know how to make it sound nicer)

The detail slider is a manual thing. You put the render call with 1/2/3 level in the loop. Only the lines with same render level will be displayed. Can be used to see the sorting at different granularity.

▲

Sn0wCoder 10 months ago | parent | prev | next [-]

Ok spent way too much time fiddling with the options and testing out different sort algorithms. It’s fun to start with one sort and then halfway through switch to one that is very different and see if it helps or hurts the performance. Almost makes me want to break out the old Algorithms and Data structures book to remind myself of which one to use when you know the data could already be half sorted vs when you know the data is going to be completely random.

Bookmarked but guessing I will never use it again but who knows if I ever need to do another leet code test this would be a good resource for sorting. This could be useful for those of you that are still in college to have one of those aha moments when it comes to the sorting algorithms you are learning about. If you are going to look at the code, go to src -> lib -> sort-algorithms to see how they are implemented. Note the asterisk after the function* keyword which signifies a generator function.

▲

thih9 10 months ago | parent | prev | next [-]

Siren sound: sort the table using any algorithm and then run the bubble sort on the sorted set. Press "reverse" for a different flavor.

Latch: switch to a different tab mid-sort. Switch back to stop the latch.

Metronome: Hit "valley" and run selection sort.

Free Jazz[1]: Hit "shuffle" and run bitonic sort.

[1]: https://www.youtube.com/watch?v=8bRTFr0ytA8

▲

block_dagger 10 months ago | parent | prev | next [-]

Cool project. Suggestion: disable sound by default and consider more musically pleasant tones.

	▲	mszula 10 months ago \| parent \| next [-]
		Thank you for the suggestion. Well... I really aim to create a more "musical" sound, but I must admit that I lack knowledge in the field of creating a pleasant sound using oscillators, which is necessary here.
	▲	pimlottc 10 months ago \| parent \| prev \| next [-]
		These visualizations go way back, I recall a version in Quick Basic that sounded exactly the same… I’m sure that’s not an accident.
	▲	10 months ago \| parent \| prev [-]
		[deleted]

▲

Y_Y 10 months ago | parent | prev | next [-]

I loved when it had a popup to beg me to star it on GitHub.

▲

dspillett 10 months ago | parent | next [-]

With the ever popular options of "yes" and "maybe later". No is a valid answer, people, force me to lie by saying maybe.

	▲	kapitalx 10 months ago \| parent [-]
		It could have both Yes and Maybe take you to the github page. That way you get more time to decide :)

▲

CoastalCoder 10 months ago | parent | prev [-]

Same. The site in general is great, so a solicitation like that detracts from the experience.

▲

jakegmaths 10 months ago | parent | prev | next [-]

I made a similar thing earlier this year at https://www.mathsuniverse.com/sorting that doesn't have music and focuses more on teaching students how different sorting algorithms work and how they compare to each other.

▲

publicprivacy 10 months ago | parent | prev | next [-]

This is really cool. I am learning DSA at age 34, and you inspired me to go harder in prepping for FAANG+

	▲	BossingAround 10 months ago \| parent [-]
		Funny, I'm 33 and DSA "inspired" me not to go to FAANG+. Of course, not the DSA themselves, but rather, leetcoding. Good luck on your journey!

▲

theodpHN 10 months ago | parent | prev | next [-]

"Bublé Sort" (2016)

https://communities.sas.com/t5/Graphics-Programming/Fun-With...

▲

factormeta 10 months ago | parent | prev | next [-]

The visual of Radix LSD (https://en.wikipedia.org/wiki/Significant_figures#Least_sign... ) was quite interesting!

▲

xnx 10 months ago | parent | prev | next [-]

Videos from this tool (or one like it) are surprisingly popular on TikTok.

▲

ucirello 10 months ago | parent | prev | next [-]

In the box of QuickBasic 4.25 Professional it has a BAS file that was exactly like this. Really neat. It even played sounds!

▲

xhls 10 months ago | parent | prev | next [-]

Jerma985

https://www.youtube.com/watch?v=C2BXMwcns5c

▲

LVB 10 months ago | parent | prev | next [-]

Nice. My son likes the YouTube videos of these sorting demos and I’m sure he’ll get into this too.

▲

wduquette 10 months ago | parent | prev | next [-]

Gosh, and I thought this would be about solitaire games.

▲

joshdavham 10 months ago | parent | prev | next [-]

Nice project! Even cooler that it was built in svelte

▲

chris_wot 10 months ago | parent | prev [-]

So, the only sort worth a damn in Quick Sort?

▲

alejohausner 10 months ago | parent [-]

Not necessarily. Initialize the data to "Mountain" or "Valley" and run quicksort, and you get O(n^2) behaviour.

Quicksort is best for randomized data. In fact, the best way to guarantee good performance from quicksort is to shuffle the data first! Well, it is theoretically possible that shuffling might yield a valley or other unlucky input, but the odds of that are O(1/n!) .

▲

Fredkin 10 months ago | parent [-]

The radix msd sort seems to do well on valley and mountain.

	▲	vrighter 10 months ago \| parent [-]
		But radix sort is its own beast (a variant of counting sort). It requires O(N) memory, but since it is not a comparison sort, it also sorts in O(N). But it can only sort integers. So not exactly an apples-to-apples comparison.