Algorithm Visualization - A Domain-Specific Language

Paul Oppenheim

Why Algorithm Visualization?

Software is often difficult to explain. Code authors frequently comment source code, write unit tests, and write external documentation. Additionally, developers use whiteboards and diagrams to communicate how their software works. Are there universal guidelines about diagrams relating to software and algorithms? What are the practical applications that can be taken today given the body of research on the subject?

Why an Algo Vis Language?

One of the most immediate needs of anyone interested in answering this question is a practical tool for generating graphs given pseudocode / visual-code annotations. Ideally, such code would be embedded inside the code itself in the comments along with other documentation. Tools currently used for extracting comments (e.g. Doxygen, Sphinx, etc.) could be enhanced to process additional syntax to generate images. Documentation generated from such tools is typically HTML with other web-friendly data types; as such, it would be expected that diagrams in the software would be similarly web-standards friendly.

Class Project Goals

Bonus / Later Work

NOT going to

Example - Quicksort

Data Structures and Algorithms with Object-Orientated Design Patterns in Java (Preiss)

Example - Quicksort


Example - Quicksort


Example - Quicksort

Possible annotation to generate wikipedia version (completely uneducated guess at this point)
	array, box whitespace
	3 7 8 5 2 1 9 5 4
	  +-----------+ +-+
	  V           | V |
	3 7 8 5 2 1 9  5  4
	  |               ^

Example - Quicksort

Or another annotation, closer to software
	array a = 3, 7, 8, 5, 2, 1, 9, 5, 4;
	idx p = 0; idx i = 1; idx j = len(a) - 1;
	i++ until *i > p
	j-- until *j < p
	line directed j.init, j
	lint directed j, i.init
	line directed i, j.init
	{tmp = a[i.init]; a[i.init] = *j; a[j]=



Will be based on research as I go, many iterations




Thanks! Questions? Comments?

Presentation - S5 javascript / CSS slideshow