PyAlgoViz: Python Algorithm Visualization in the Browser

Chris Laffra

Audience level:
Novice
Category:
Education

Description

PyAlgoViz is an HTML5 browser application that allows Python students and practitioners to prototype an algorithm, visualize it, replay the execution, and share the end-result with others. Main usage is in the Datastructures and Algorithm track of the Computer Science curriculum.

Abstract

[PyAlgoViz][1] is an [HTML5][2] browser application that allows Python students and practitioners to prototype an algorithm, visualize it, and share it with others. To visualize an algorithm, it is sent to a server that runs the code, records the execution, and sends the recording back to the client. In the browser, the recording is then replayed at the speed the user wants. Graphics primitives to draw rectangles, lines, and text, in addition to generating sounds, allow algorithm visualizations that enhance the understanding of the algorithm. Main usage for [PyAlgoViz][3] is in the Datastructures and Algorithm track of the Computer Science curriculum. Not only will students learn how to implement algorithms in Python, they will also will be able to better understand asymptotic or even buggy algorithms by inducing patterns from observing the visualizations they create themselves. Technologies used to develop PyAlgoViz were [MacVIM][12], [Google App Engine][4], [Python 2.7][5], [Python NBD DataStore][6], [Jinja2 Templates][7], [HTML/JavaScript/CSS][8], [CodeMirror][9], [jQuery][10], and [D3.js][11]. [1]: http://pyalgoviz.appspot.com/ [2]: http://www.w3schools.com/html/html5_intro.asp [3]: http://pyalgoviz.appspot.com/ [4]: http://code.google.com/p/macvim/ [5]: http://python.org/ [6]: http://developers.google.com/appengine/docs/python/ndb/ [7]: http://developers.google.com/appengine/docs/python/gettingstartedpython27/templates [8]: http://www.w3schools.com/ [9]: http://codemirror.net/ [10]: http://jquery.com/ [11]: http://d3js.org/ [12]: http://code.google.com/p/macvim/