views:

240

answers:

7

Any decent visualization of a couple different sort algorithms? I'm looking for something I can use in a demo, and willing to write my own (can't be that hard) but would prefer to use someone else's if I can.

NO applets though, the majority I'm finding are applets... Lightweight flash or canvas. I would like the following sorts:

  • Bubble
  • Selection
  • Insertion
  • O/E

Nice but not needed:

  • Merge
  • Quick
  • Heap
  • Raidix

Considering the lack of available ones, I wrote my own to answer this question.

+6  A: 

This is a great video. More than just a visualization:

http://www.youtube.com/watch?v=t8g-iYGHpEA

Ian Henry
Yep, made me laugh.
Daniel
+9  A: 

The visualizations here are pretty good, they seem to be just gifs

http://www.sorting-algorithms.com/

Daniel
Nice, but I'm looking for a bit more then just GIF's.
Josh K
+3  A: 

I thought this site was fantastic, there's a few different plot types showing how the different algorithms work. A python implementation of each sorting algorithm is included as well.

GWW
+1  A: 

Sorting Out Sorting is the classic work on the subject; if you Google the phrase, one of the first hits will be a full-length video. The quality looks a little fuzzy, since the computer video looks like it was made off a video copy of a 16mm print rather than the master (I have no idea if the master still exists) but it's probably a good introduction anyway. I'm glad to see it's available.

supercat
Not looking for old videos, thanks.
Josh K
A: 

The classic visualization is the movie Sorting out sorting.

Albin Sunnanbo
+6  A: 

I didn't like any of the ones available, so I wrote my own with a not-so-brief explanation to go along with it.

Sorts implemented:

  • Bubble
  • Selection
  • Insertion
  • Comb (with two alternate endings)
  • Shell
  • Quick
  • Heap
  • O/E
  • Radix

Options

  • Random
  • Partially sorted
  • Reversed
  • Few values

Data sets:

  • Large (~250 elements)
  • Small (~50 elements, works well for slower browsers and excellent on mobile devices such as an iPhone or iPod touch)

I've tried to make sure the time differences are as accurate as possible, please let me know if you have any suggestions for improvement.

Josh K
+1 - Just started looking at the visualization. Really fun to see it going. Very informative for my way of thinking (visual ;) ).
Peter Ajtai
+1, but your pages are slightly too wide for my browser! >_<
palswim
@Palswim: How wide is your browser? I can normally view fine even on my iPod Touch.
Josh K
@Josh K: It's slightly over 850px wide. The visual sorting page fits, but I have a horizontal scrollbar on the explanation page.
palswim
@palsiwm: You mean the blog page? Hmmm. There is a mobile version of the site for people with <=480px width. How are you confined to 850? Is this a device I can target specifically? If so I'd be happy to throw up a 800px wide version. Shoot me an email or comment on my more recent [Mobile Stylesheet](http://joshuakehn.com/blog/view/22/Mobile-Stylesheets) post.
Josh K
@palswim: Tell you what, let me change the width to 800px and let me know if that works. I just checked quickly and it doesn't appear to break anything. Do shoot an email / comment if you are on a device with a browser that has an issue with the width though.
Josh K
@Josh K: I just stubbornly refuse to maximize my browser windows; don't worry too much about it.
palswim
+1  A: 

This one might not be the prettest of animations, and it has just a few of algorithms, but it has a textual break down of steps during the sort, which is very nice.

Locke
+1, Nice breakdown, but it's an Applet.
Josh K