Git Product home page Git Product logo

d3-space-filler-explorer's Introduction

d3-space-filler-explorer

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.

D3 Space Filler Explorer

Requirements

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.

Running

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.

Packaging

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 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).

Performance

Two actions contribute to the time taken to visualize the space occupied by the files in a directory structure:

  1. Building the JSON data structure that describes the directory structure.
  2. 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.

d3-space-filler-explorer's People

Contributors

jeffreymorganio avatar

Watchers

James Cloos avatar Phylroy Lopez avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.