Treemap visualizations for CS2

• Authors: Martha J. Kosa;Mark A. Boshart
• Venue: Proceedings of the 9th annual SIGCSE conference on Innovation and technology in computer science education
• Year: 2004

Computer science instructors periodically need to update their classroom examples and programming assignments in order to reflect changes in current practice in the field and to discourage copying by students. As experienced CS2 instructors, we regularly face this challenge. The topics in our CS2 course are standard and include recursion, lists, stacks, queues, and trees (including B-trees as well as standard binary search trees and AVL trees). Our students use Java (including GUIs). We have experimented with having students use and write programs to visualize various data structures. The students have written programs to visualize search trees using the traditional approach in which ovals represent nodes and lines represent links. They have also written programs to visualize search trees via a Web browser [2]. We propose an alternate visualization technique based on treemaps. We believe that treemaps are a rich source for classroom examples and assignments for CS2 instructors. Trees are useful for storing hierarchical data, and they are naturally recursive. A tree is either empty, or it has a root node with subtrees. A root is connected to its subtrees by links or branches. We had an idea to draw a tree in a square, which would be split into multiple rectangles, one for each node in the tree. As we moved down a level in the tree, we toggled the direction of the split in the rectangles from vertical to horizontal or vice versa. The root node's size in the current rectangle corresponded to its relative weight in the current subtree. The structure of the tree could be inferred by the relationships among the rectangles and their relative widths and heights. We drew several of these embeddings by hand and noted that the patterns resembled art by the Dutch abstract artist Piet Mondrian [6]. We then implemented this visualization using the Java Power Tools [4] library and noted that this visualization can be enriched with colors and graphical patterns, as in the Kaleidoscope example [3]. Our idea is an active research area in computer graphics [7]. However, it still appears to be a novel teaching idea for CS2. Ben Shneiderman [5] was the first to study two-dimensional space-filling representations of trees; he called them "treemaps". His motivating problem was to visualize directories in order to determine disk utilization. His algorithm was similar to our algorithm. XML documents can also be visualized using his algorithm and others [1]. Our goal is to synthesize this treemap visualization literature [1, 5] into classroom materials for CS2 instructors.