Foundations Visual Design
The tree map uses the following visual variables:
- Size is the most important visual variable in tree map. The size of a tile represents the size of its underlying unit in lines of code.
- Value is used to represent the density of the source code, i.e. the ratio between actual code lines and total lines (code + comments + blank).
- Hue is used to identify the (main) programming language of a unit. The color mapping was taken from GitHub for better recognition, but is arbitrary in most cases (some notable exceptions are the programming language Ruby and Rust, which imply a certain color, and plain text, for which white is a good match).
Position is not used in the two-dimensional, but in a hierarchical sense: A file deeply nested in the file hierarchy needs to be found by navigating through its parents.
The Gestalt Principles Similarity (same color for same programming language), Closure (every folder groups sub-folders and files together), and Common Region (a folder is first shown as an optical unit) can also be recognized in the tree map.
Fundamental Principles of Analycial Design (Tufte)
The tree map allows for Comparisons, and displays the Structure of source code folders. The name of every unit (folder, file), line counts, and programming language are integrated in the visualization as an Integration of Evidence. The website as a whole is set up as a Documentation for the whole project.
Data-Ink Ratio (Tufte)
Since the most important feature of the tree map is the display of relative sizes, virtually all the ink spent is used for visualizing the data. There is nothing that can be erased without corrupting the information provided.
Human Perception
A source code folder is first visualized as a coherent unit. As soon as the user moves the mouse over such a unit, it is previewed as a whole made up of different parts. This is the same experience the user has when navigating through the file system. On every stage, the user needs to re-orient. The user is always focused on the current folder, which is the same principles that many file explorers are based on. The navigation bar on the top provides bread-crumbs, so that the user does not get lost.
Tasks in Data Visualization
In consideration of the taxonomy of interactive dynamics for visual analysis by Heer, J.; Shneidermann, B. (2012), these are some descriptions of our visualization:
The treemap chart is probably best suited for the visualization of source code folders to represent as much information as possible. The desired data can be easily filtered out by clicking through the different path levels. The size and color of the rectangles, for example, already derive values from the source data. The manipulation of the visualization is very intuitive and allows a simple and clear manipulation through the folder structures. During the manipulation of the visualization, all legends are adjusted in parallel, which give further information about this path layer. To pass on information, only the path can be specified or shared to get to the discussed information.
Interaction Concept
The user can hover over a folder to see a preview of the underlying structure. On the bottom, and on a tooltip panel, detailed information is shown. A click on that folder opens it in full size, and reveals the items contained. The top bar shows the full hierarchy, denoting the location using the last element. A click on this bar navigates upwards. On the right hand side, a stacked bar shows the proportions of code, comment, and blank lines. Instead of a legend, a tooltip is provided.