Crocus

Built by Chris Uehlinger

When you need to free up room on your hard drive, your OS often does little to help you figure out what's taking up so much space. You may be able to guage the relative size of each file in a directory, but it's hard to get a more comprehensive picture than that.

Crocus visualizes how much space each part of your file tree takes up.

This comes in handy for a number of common use cases:

• Sorting out which artists/albums are blowing up your music library
• Pruning large dependencies from a project
• Looking for large, dead weight applications that you don't often use

Hover over an area of the graph to see a breadcrumb of its file path, along with how much space it is taking up. If something seems to be taking up a large amount of space, click on it to zoom in and get a more detailed look.

Demo

Here's Crocus looking at it's own directory:

Usage

Crocus can be downloaded from npm and installed globally:

$ npm install -g crocus

After that, type crocus in any directory to start a crocus instance, which will be served over localhost:8642. Once you've taken a look around, you can navigate to other directories from within the app, without having to ever go back to the command line.

How it works

Crocus is an express app with one API endpoint and one view. The API endpoint takes a path and returns a recursive data structure describing the file tree below that point. The view takes that data and renders the Sunburst twice. First it renders the sunburst in canvas, which allows for smooth animations. Then it renders an invisible layer on top in SVG, which allows for easier event handling and tooltips. Only the canvas is animated: the SVG simply skips from the beginning state of the animation to the end state with its events disabled until the canvas animation is complete.

Acknowledgements

Crocus was inspired by a few other projects:

• ungit, a fantastic git client I use every day. I liked the idea of a command line tool that exposed its interface as a web app with useful visualizations. There are probably tons of other applications of this idea waiting to be discovered. Like ungit, I may package crocus as an Electron app if there is enough interest.
• Mike Bostock's Zoomable Sunburst demo and Kerry Rodden's variant with breadcrumbs. D3 is an awesome tool.