This is neat. If you enjoyed this you might also like the Hungarian folk dancers demonstrating sorting algorithms on youube:<p><a href="https://www.youtube.com/watch?v=ywWBy6J5gz8" rel="nofollow">https://www.youtube.com/watch?v=ywWBy6J5gz8</a>
Hi. This is my 2nd algoritm visualization. Creating them is fun.<p>Besides designing the illustrations, I've spent a lot of time crafting the framework so expect more of these in the future. Ongoing effort, but also tried to make the codebase approachable for others to learn from and be able to contribute: <a href="https://github.com/skidding/illustrated-algorithms" rel="nofollow">https://github.com/skidding/illustrated-algorithms</a><p>How would you make algorithms fun? Looking forward to ideas and feedback. Thanks!
some constructive feedback: one of the greatest features of quicksort is that it is an in-place algorithm, it doesn't use any additional storage. qsort cleverest trick is to switch an element greater than the pivot with one smaller in a single step, and all of that is lost in the animation when the first thing it does is to group the fruits into the "less" and "greater" piles. as it is, your animation is great, but it doesn't really illustrate qsort, especially the most fundamental aspects that set it apart from other sorting algorithms.
Update: I realize the featured example is not the most optimal Quicksort implementation. I doesn't even handle duplicates. Indeed this variant was chosen primarely because of its aesthetics.<p>While I'd like to keep the mission of this project to "illustrating the basic mechanics of algorithms as elegantly as possible", I realize this can be a) annoying for people who understand the specifics in depth, and b) not enough (or confusing) for people just picking this up. Which is why I'm thinking of creating an info page for each algorithm to:<p><pre><code> - Outline the limitations of the featured version
- List a number of possible improvements (e.g. pivot strategies)
- Link to external resources for complete examples & docs
</code></pre>
Open discussion. What do you think?
Personally I find <a href="https://visualgo.net/" rel="nofollow">https://visualgo.net/</a> to be more helpful. I don't think the fruits are too intuitive.
Good work, looks great!<p>I have the following comments, hope you find them useful:
* I find counter intuitive that the animation goes up, i think it should go down, but that probably just me.
* Would recommend using something different than fruit which is probably one of the last things that comes to mind when thinking of ordered sets, also the picture keeps getting in the way of me sorting lexicographically in my mind.
* A per step mode would also come in handy.
If you enjoy visual or interactive explanations, we're currently building a community for that on Reddit: <a href="https://www.reddit.com/r/explorables/" rel="nofollow">https://www.reddit.com/r/explorables/</a>
Update 2: I've taken action to try to alleviate some of the confusion and integrate the helpful feedback you've sent me.<p><pre><code> - Added Disclaimer to clarify the project mission and limitations
- Created Footnotes section for insights collected from the community
</code></pre>
Both can be found here: <a href="https://github.com/skidding/illustrated-algorithms/blob/master/README.md" rel="nofollow">https://github.com/skidding/illustrated-algorithms/blob/mast...</a><p>Thanks!
Hey, love it! I know that you know it can handle duplicates, but a simple fix can work here.<p>Make an array called `equal` before making the `less` and `greater` arrays.<p><pre><code> const equal = arr.filter(i => i === pivot);
</code></pre>
Then, instead of adding the pivot, add the equal array.<p><pre><code> return [
...quicksort(less),
...equal,
...quicksort(greater)
]</code></pre>
This was cool, the highlighted code tour is a great touch.<p>For anyone else who enjoyed this, you might also enjoy this blog post full of animated algorithms by Mike Bostock: <a href="https://bost.ocks.org/mike/algorithms/" rel="nofollow">https://bost.ocks.org/mike/algorithms/</a>
That's amazing. Just two questions<p>1) on quicksort:<p><pre><code> const less = list.filter(i => i < pivot);
const greater = list.filter(i => i > pivot);
</code></pre>
Wouldn't this be faster:<p><pre><code> less = what's < pivot
greater = the rest
</code></pre>
2) What is the algorithm people use?
That's snazzy, good work!<p>I found myself wanting to set my own initial order of the list to see what some specific edge cases (already sorted, one element off from being sorted, in reverse order, etc) look like.
There was another interesting animated sorting page I found on here many months ago. I haven't seen it in the comments yet and I can't find it anywhere, but this stuff is cool.
Why do people keep using Quicksort as an example?<p>I find Mergesort to be much more intuitive. And better yet, it has a much better worst-case performance.