Visualizing code

Data visualization has been put to innumerable uses, but depicting how code works is an area less often explored. We coded the animation below in Java, using the Processing IDE and rendering its frames into an MP4 file, in order to show how a simple "selection sort" algorithm works. As the animation demonstrates, each element in the randomized array is taken in turn and compared with all of the other unsorted elements; the largest is then shifted to the left-most position and the process repeats until all the elements have been sorted by size. Such an animation could also be written in JavaScript, of course, which would allow a user to re-randomize the array as desired, or to change parameters like the number of elements or the tempo of the sort process. Each approach has its own use cases: the "lean back" video is appropriate for social media sharing to interested customers and prospects, while "lean forward" interactive animations could play key roles in a training course.