Java Authors: Mike Kavis, Kevin Benedict, Elizabeth White, Ali Hussain, Pat Romanski

Related Topics: AJAX & REA, Java, XML, SOA & WOA, PowerBuilder, Virtualization

AJAX & REA: Blog Post

Where Is My Disk Space?

An HTML 5 File System Visualizer

by Nick Mueller, Zetta.net

Hello new users! The file system visualizer can be found at wheresmydiskspace.com - continue reading to learn more about the development of the tool and the visualization options.

Before buying more storage space it's a good idea to make sure your existing space isn't filled with redundant or old data - or hundreds of downloaded cat videos.

Disk capacity is increasing and while prices continue to drop, those savings are offset by demands for new capacity to store more and larger files. Not only does this mean more primary disk space, but 2x that amount for backups.

Zetta co-founder Lou Montulli may have the answer to this problem. Recently Lou combined his experience with browsers and storage in creating an open-source tool - a File System Visualizer (www.wheresmydiskspace.com) - for analyzing storage usage.

Lou was a founding engineer at Netscape in 1994 when he helped create the first commercial web browser Netscape Navigator. Over the years he's been responsible for the development of many browser related innovations, and co-founded Zetta.net in 2008 - where he continues to serve as VP of Engineering and Chief Scientist.

"The tool was conceived as a method for visualizing multiple aspects of any large file set: an existing file system, a backup or an archive," he says. "This can be a great tool to use if you find yourself running low on disk space and need to find files to delete to free up space."

The tool makes heavy use of the Data-Driven Documents JavaScript library together with jQuery, Dojo, PrettyPhoto, JavaScript and Scalable Vector Graphics. Sponsored by Zetta, all the source code for the File System Visualizer is available and a BSD license allows anyone to use it, commercially and non-commercially, free of charge.

"Part of the challenge and opportunity of this tool was writing it in JavaScript and using HTML as the user interface," Lou says. "I was part of the team who wrote the very first web browsers, so I was personally motivated to design a tool that takes advantage of some of the great new technologies coming out of HTML5, Mozilla.org and the broader web community."

Getting Started
The File System Visualizer is free to use and doesn't require installing any software. You just need a web browser that supports SVG and has a fast JavaScript engine. Go to www.wheresmydiskspace.com. The home page has a few video demonstration of the product that you can view before running the software.

Or you can:

  1. Click the link at the top of the page to take you directly to the visualizer.
  2. There you have three options: you can look at some sample data sets, use a Java applet to collect the data from your local machine and create a manifest file detailing what is in the file system, or you can load a manifest file created in a previous scan.
  3. If you choose to do a new scan, and there are a large number of folders, the software will prompt you to save the manifest to your disk rather than keeping it in the browser.

Test Setup
We recently had the File System Visualizer tested on a Windows 7 desktop with a third generation Intel Core i7 processor and 16 GB RAM. The scan took approximately 5 minutes. When completed, a message came up that there were 52,993 folders.

The software can analyze a local disk, or an administrator can run it remotely on any mountable drive. At this point it runs on Windows (32-bit and 64-bit) and OSX.

Visualizing Your Data
After running the scan, the software then presents seven different views of the data. The views are illustrated at the top of the page and you can click on any of the images to access that view of the data.

Summary Page - This showed that the test computer had 353.1 GB of data in 52,993 folders containing 364,931 items, with an average file size of 967.7 KB.

Visual Tree - This gives a hierarchical tree visualization of the data. On the left is a pull-down box where you can select to view the data by size, by type or by date. There is also a slider where you can select the tree display depth from one to seven levels.

Screenshot of the Tree View

Viewing by size shows a hierarchical view of the file system and the amount of data in each folder with up to seven levels of depth. To look at just the contents of a single folder, rather than the entire file system at once, just click on the dot next to that folder.

Viewing by type at the first level divided the data into known types and uncategorized. Going to the second depth level divided the uncategorized by their file extension and the categorized into groups such as disk images, games, database, software development, fonts, plugins, office types, settings, executables, media, backup and system. For most of those categories, going to the next level would give the file extensions, but some categories (media, office types and encodings) would further subdivide before getting to their final level.

Viewing by date, the first level divides the data into "1 year and older" and "within 1 year" and shows the GB of data in each category. Taking it to the second level splits the "within 1 year" branch into five levels and the "1 year and older" into each of the years for which you have data. There is no third level available.

Hierarchical List - This view presents the data in list rather than tree format. To get to deeper levels, click the + sign next to any of the categories. In addition to the file names, there are columns for Size in Directory, Total Size and % with children. When you click on the headers for the columns, up and down arrows appear, making it look like the data is sortable by those columns, but it isn't.

Flattened List - This is a sortable, non-hierarchical list of the folders. When viewing by Size, in addition to File Name, there are seven other sortable columns of data in each folder, including Size and Number of Items. The Type and Date views are similarly sortable. In none of these views can you look at a subtree, only at the entire file system. To view a subtree, go to one of the other views and narrow it down to the subtree and view type you want, and then click on the Flattened List visualization.

Your hard drive in "sun burst" view.

Sunburst - A type of pie chart, with rings showing each of the levels of depth. The chart can display each slice as an even size, or can adjust the sizes by the file count or amount of data in the slice. Clicking on any of the slices will move that folder or data point into the center circle, with the rings showing the subfolders or subcategories of that particular subdirectory.

Tree Map - A box type view of the data. As with the Sunburst, the boxes can be sized equally, or sized by data size or number of files. Clicking on any of the boxes will show the details within that subdirectory or data type.

Bubble Chart - This gives two layout options for showing the data: Bubble Chart or Circle Pack. The Bubble Chart shows bubbles for all the items in that category sized by the amount of data in that folder or file type. The Circle Pack presents a hierarchical view of the bubbles. In either view, clicking on a bubble or circle will give the bubbles showing the subcategories of that item.

The File System Visualizer is a quick and easy way to gain understanding of what's on your file system. It's intuitive to use and within minutes, you can start locating what is taking up disk space. Then you can delete or archive anything that is no longer needed, or establish policies to prevent wasted space. Then, if additional storage space is still needed, you can give management a clear visual presentation of how storage is being used in your environment. You can start visualizing your hard drive right now.

Nick is Zetta's Corporate Reporter, and has been writing and telling stories about technology with blogs, social media, and content marketing since the days when the BBS reigned.

More Stories By Derek Kol

Derek Kol is a technology specialist focused on SMB and enterprise IT innovations.