The D3 Space Filler Explorer is an Electron application that uses multiple D3 visualizations to present the space consumed by the files in a hierarchical directory structure.
The used and free space of each disk on the system is visualized with a two-segment pie chart. The space consumed by each of the files in a user-selectable directory is visualized with a treemap. The directory data structure visualized by the D3 treemap is generated by my file-size-tree-js package.
The Space Filler Explorer demonstrates how to organise the architecture of an Electron app and how to integrate multiple D3 visualizations.
Watch the Space Filler Explorer video on YouTube.
As an Electron application, the Space Filler Explorer is built from cross-platform web technologies (HTML, CSS and JavaScript) and Node.js modules hosted on the npmjs.org registry. To run the Space Filler Explorer, you will need to install Node.js.
After cloning the d3-space-filler-explorer repository, run npm install to download the Node.js modules on which the Space Filler Explorer application depends.
To run the Space Filler Explorer application, invoke the start script in the package.json file:
npm start
The Space Filler Explorer is not currently compatible with Windows because one of its Node.js dependencies (nodejs-disks) is not compatible with Windows.
Electron applications can be packaged to run as native, double-clickable applications. The following commands package the Space Filler Explorer as native applications on Mac OS X and Linux:
npm run package-osxnpm run package-linux
This section explains how packaging for Mac OS X works. However, packaging for Linux (and Windows) follows a similar pattern. For more information about packaging on all three platforms, see the documentation for the electron-packager tool.
The package.json script contains the package-osx script for packaging the Space Filler Explorer as a Mac OS X application:
"package-osx": "electron-packager ./ SpaceFillerExplorer --platform=darwin --arch=x64 --icon=app/icons/Icon.icns --version=0.30.4 --ignore=node_modules/electron-* --overwrite",
The package-osx script uses the electron-packager tool to package the Space Filler Explorer as a 64-bit (--arch=x64) Mac OS (--platform=darwin) application into the SpaceFillerExplorer.app file, which is stored in the SpaceFillerExplorer-darwin-x64 folder.
Mac OS X applications require icons in various sizes and resolutions to be stored in a .icns file. The icons for the Space Filler Explorer are included with the command-line parameter --icon=app/Icon.icns.
The remaining command-line parameters provide electron-packager with the Electron version (--version=0.30.4), tell electron-packager which folders to exclude from the SpaceFillerExplorer.app file (--ignore=node_modules/electron-*), and allow electron-packager to overwrite a previously-created SpaceFillerExplorer-darwin-x64 folder without a warning (--overwrite).
Two actions contribute to the time taken to visualize the space occupied by the files in a directory structure:
- Building the JSON data structure that describes the directory structure.
- Building and rendering the D3 treemap.
For small folder structures, building and rendering the D3 treemap takes most of the time. For large folder structures, building the JSON data structure takes most of the time.