For this assignment, students write a program that renders a
tree map visualization of their local filesystem (Figure 5). Their
program must include a menu option that allows the user to
pick a new root folder for the tree map at runtime. The assignment also requires them to implement several color schemes for
the visualization, for example, file type, file age, file permissions.
As always, students can use only the standard Java line-drawing
and file APIs; all the rest is coded by hand.
For this assignment, students select a visualization scheme
from one of the papers they have read and implement it. Al-
ternatively, they can significantly extend one of the visualiza-
tions they already implemented. Less commonly, they may
propose and implement their own completely new visualiza-
tion scheme (Figure 6). This assignment is intended to give
students a small taste of proposing and defending a thesis or
per table row). This assignment gives students additional prac-
tice using the Visual Information-Seeking Mantra: in addition
to a static rendering, they must also implement the ability for
the user to highlight a single polyline by hovering over it (Figure
2). Students must also implement the ability to select a subset of
polylines using selection-rectangles (Figures 3 and 4) reminis-
cent of the TimeSearcher user interface [ 9].
PROJECT 6: TREE MAP
A Tree Map [ 11] is a visualization metaphor for hierarchical tree
structures, especially filesystems. Each individual rectangle represents a file, and each group of nested rectangles represents a directory or folder. The area of each rectangle is directly proportional to
the size of the file relative to the root directory (the entire window).
Figure 4: When the user releases the mouse, only those polylines that
intersected the rectangle appear in the chart. The rest are faded.
Figure 2: Screenshot of completed Parallel Coordinates assignment.
Hovering over an individual polyline highlights it. This chart displays the
GPA, credit hours (cumulative and current), age, and gender of students
in our department. The highlighted polyline represents a 23-year-old
female student with a 4.0 GPA who is fairly new to the program (low
number of cumulative credits).
Figure 3: The user drags a “rubber-band” selection-rectangle near the
bottom-right corner of the window, selecting a subset of polylines. In
this case, the rubber-band is selecting all female students.
Figure 5: Screenshot of completed Tree Map assignment, visualizing a
portion of the first author’s filesystem.