The Space Filler Explorer

This article describes the Space Filler Explorer, an application for navigating around hierarchical filing systems with three co-ordinated views: a directory tree structure, a list of files, and a tree-map visualization of the files. A tree-map is a 2D space filling representation of a complex hierarchical tree structure. Each file is visualized by a rectangle proportional to its size that enables users to identify rapidly large files. Users can dynamically query the tree-map visualization to filter out files based on their size using several relational operators. A pie chart visualization of disk space usage is also provided.

1. Introduction

The Space Filler Explorer enables users to navigate around a hierarchical filing system using three co-ordinated views: a directory tree structure, a list of files, and a tree-map visualization of the files. A tree-map is a 2D space filling representation of a complex hierarchical tree structure. Each file is visualized by a rectangle proportional to its size that enables users to identify rapidly large files. Users can dynamically query the tree-map visualization to filter out files based on their size using several relational operators. A pie chart visualization of disk space usage is also provided.

Section 2 describes the three co-ordinated views, the disk usage view, and the Space Filler Explorer’s other navigation controls. Section 3 describes the dynamic query interface that enables users to filter files with the tree-map view.

2. The Space Filler Explorer

The Space Filler Explorer enables users to navigate around a hierarchical filing system using three views: a directory tree structure, a list of files, and a tree-map visualization of the files. The three views are co-ordinated: opening a directory in one view updates the other views. The following screenshot shows the Space Filler Explorer.

2.1 The Directory Tree View

The directory tree view presents the hierarchical directory structure as a tree. Each tree branch represents a directory. Opening a tree branch opens the directory: the file list view is populated with the files in the directory, and the tree-map view is updated to visualize the files in the directory.

2.2 The File List View

The file list view shows the name of each sub-directory, and the name, size, extension, and the time and date of last modification of each file. Double-clicking a file opens the file. Double-clicking a directory opens the directory: the directory tree view is updated to open the branch of the directory, and the tree-map view is updated to visualize the files in the directory.

2.3 The Tree-Map View

The tree-map view presents the files in the current directory as a tree-map visualization. A tree-map is a 2D space filling representation of a complex hierarchical tree structure (Shneiderman 1992). A rectangular area is subdivided into regions that represent the files in a directory. The size of each region is proportional to the size of the file it represents. Neighboring regions are filled with a different colour or greyscale shade. A tree-map uses every available pixel to show an entire sets of files and their structure at once without the need for scrolling. Users are able to identify rapidly large files regardless of how deeply nested they are.

Diagram (a) below shows an example tree structure that represents a hierarchical filing system. The rectangles represent directories and the circles represent files. The size of each file and directory is shown inside the corresponding circle or rectangle. The size of a directory is the sum of the sizes of the files and sub-directories in that directory. The unit of measurement of the size, whether bytes, kilobytes, or megabytes, is unimportant, as long as the same units are used for each file size. Diagram (b) shows a tree-map visualization of the file and directory information in the tree structure. (Both diagrams are from Shneiderman (1992).)

The tree-map view of the Space Filler Explorer enables users to explore directories and open and filter files. When the cursor is moved over a rectangle, the directory that contains the file represented by the rectangle is highlighted with a border that surrounds the rectangles that represent the files in the directory. The file is also highlighted in the file list view. The following screenshot shows the tree-map view of the Space Filler Explorer.

Clicking on a rectangle opens the directory that contains the file represented by the rectangle: the directory tree view is updated to open the branch of the directory, and the file list view is populated with the files in the directory. Right-clicking on a rectangle displays the pop up menu shown in the following screenshot. The menu options enable users to open the file represented by the rectangle, to open the directory that contains the file, to filter the files with the dynamic query interface, and to change the colour of the directory highlight border.

2.4 The Disk Usage View

The following screenshot shows the disk usage view, which presents disk space usage as a pie chart.

2.5 The Navigation Controls

The Space Filler Explorer records a history of the directories that have been opened. The controls at the top of the window enable users to navigate using this history. The left and right arrow buttons move back and forth along the history and open the directory at the current point in the history. The up arrow button opens the parent of the current directory. Directories can be selected from the combo box, or entered in the combo’s text input box. The button to the right of the combo box displays the tree-map view’s dynamic query interface for filtering files.

3. Filtering Files

The tree-map view provides a dynamic query interface that enables files to be filtered based on their size. Dynamic queries enable users to modify the selection criteria of a query by adjusting graphical widgets like sliders and to see the results of the query immediately. Rapid feedback encourages exploration because if the results are not what the user expected, the operation is reversible by dragging the slider back to its previous position. Because the ranges and intermediate values are tightly controlled by the slider, an entire set of syntactic and semantic errors are avoided. Dynamic queries have been used successfully in a variety of visualization applications such as the dynamic home finder (Williamson & Shneiderman 1992), and the FilmFinder (Ahlberg & Shneiderman 1994).

The following screenshot shows the dynamic query interface that is invoked either by selecting an option from the pop up menu, or by clicking the most right toolbar button shown in the screenshot at the beginning of section 2. Files are filtered by selecting the file size with the slider or selecting a size from the list below it. The slider and the list enables the user to select the size of every file displayed by the tree-map. Files are filtered if they are less than, greater than, or equal to the selected file size, as selected with the relational operators combo box.

As the slider is moved a new query is constructed and the results are displayed immediately. Files that match the query are filtered out by hiding the rectangles that represent them. The rectangles that represent files that do not match the query are unchanged or are redisplayed if the files were previously filtered out. The following screenshot shows the results of querying the tree-map view with the query parameters shown above: the files with a size less that 50044 kilobytes have been filtered out.

References

• Ahlberg, C. and B. Shneiderman, “The alphaslider: A compact and rapid selector”, in B. Adelson, S. Dumais and J. Olsen, eds, Proceedings of CHI ‘94, 1994: 365-371.
• Shneiderman, B. “Tree Visualization with Tree-Maps: 2-d Space-Filling Approach”, ACM Transactions on Graphics 11(1), 1992: 92-99.
• Williamson, C. and B. Shneiderman, “The dynamic home finder: Evaluating dynamic queries in a real-estate information exploration system”, in N. Belkin, P. Ingwersen and A. M. Pejtersen, eds, Proceedings of SIGIR ‘92, 1992: 338-346.