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.
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
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-osx
npm run package-linux
How Packaging Works
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
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",
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
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
The remaining command-line parameters provide
electron-packager with the Electron version (
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 (
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.