Avalon 3D File System Visualizer (FolderTreemap3D)

  • [アーティクル]

Download the FolderTreemap3D sample

(Requires Windows Server 2003 or Windows XP, .NET Framework 2.0 SDK Beta 2 (or Visual Studio 2005 Beta 2), and WinFX Beta 1 RC Runtimes and SDK)

Ben Shneiderman developed the treemap style of visualization in the early 1990s in response to the common problem of a filled hard disk. For this application, Professor Shneiderman needed an alternative to the incumbent tools (i.e. File Manager and Explorer) which, although strong at quantitative presentation of one hierarchical level of files at a time, don’t offer the aggregation needed for a high-level, qualitative view. A treemap’s strength is the reverse: perspective (or context) is more important than precision. If you’ve ever trawled up and down through the levels of a hierarchy seeking the largest files and folders as candidates for deletion then you’ll appreciate the perspective a treemap gives.

The ‘squarified’ treemap is a refinement which minimizes the aspect ratio of each node rectangle and this is the variation I have used. But with any flat treemap, the depth of hierarchical nesting of a node is not obvious to the viewer. It occurred to me that, if a node’s nesting level is represented by its distance along the z axis, then an orthographic 3D projection would appear to be a flat treemap when viewed from the front but would reveal the spacing along the z axis when rotated. I was also curious to see the same 3D model projected with perspective.

I have used color to distinguish folder nodes (transparent) from file nodes (colored dark in proportion to their depth). Examine the image at the beginning of the post. The entire image is a visualization of the %windir%/Microsoft.NET/Windows folder which contains the Avalon runtimes. What does the image tell us? Well, first (and without having to expand any nodes) we can see that the \Windows folder contains a single child folder named \v6.0.4030 which in turn contains the \Avalon folder and a number of files. The \Avalon folder contains one large .msi file at a deeper level than the files inside \v6.0.4030. We get a qualitative sense of the relative sizes of the files and folders – e.g. PresentationCore.dll and PresentationFramework.dll are approximately the same size as one another and both much smaller than avalon.msi. We can also see that there is a large number of small files which we could zoom closer to if we wanted to see their names.

The following image moves up a folder and shows, amongst other things, the combined size of the Avalon runtimes (the \Windows folder) in relation to the remainder of the .NET Framework. We can also see that, for example, System.ServiceModel.dll is a little larger than PresentationCore.dll and PresentationFramework.dll.

Here are the pieces which go into this sample:

  1. A generic DatatreeNode class used to build a ‘datatree’ of the data to be visualized. Using this extension point, any data which can be represented as a hierarchy (e.g. your Exchange/Outlook folders) can be processed into a treemap.
  2. A routine to recurse into a file system folder and build a datatree from it.
  3. A TreemapNode class (and ancillary classes) used to build a treemap from a datatree.
  4. A routine to arrange the treemap into layers for back-to-front rendering. As the scene uses semi-transparent materials, it is defined back to front to aid correct alpha blending.
  5. A routine to walk the treemap layers from furthest (from the eye) to nearest and to process each node in each layer as follows:
    1. Create a tree of Visuals consisting of a TextBlock inside a Viewbox inside a Border.
    2. Create a VisualBrush from the above and use it as the material on a plane (a MeshGeometry3D) which is placed appropriately on the z axis.
  6. A custom Viewport3D in which to display and manipulate the scene (the same one I introduced in the Nendo Nessie post).

There’s a lot of information to be seen in the images here, but even more information emerges when you are able to manipulate the model yourself with the mouse. Download and build the sample and evaluate it yourself. To toggle mouse manipulation mode, use Ctrl + right-mouse-click. See the Nendo Nessie post for more details.

 

Furthermore, information is always lost when flattening (i.e. projecting) a 3D scene for display on a traditional CRT or LCD monitor. Flat displays rely on artificial depth cues (e.g. perspective or color) to tell the eye how far away an object is. The same 3D data shown on a stereoscopic or a holographic display would preserve depth information so that the eye and brain sense true depth and can more fluently read the scene.

It would be an interesting exercise to use the sample’s treemap generation logic inside a custom Panel.

I’ll leave you with another of Ben Shneiderman’s visualizations – structured flowcharts – which may offer an interesting future project for someone to realize in Avalon.

Comments