Visualize disk usage with d3.js and ZSH function

  22 Aug 2014


A standard UNIX du program that is usually used to check and provide information of disk usage (files and directories) usually look like this:

du output

Today, I take some time to tweak how to present the information in a bit more interesting, like the below figure:

duv output

I chose using the following tools (d3.js in presentation part and zsh function to create a commmand alias). This is quite a trivial task but it is a good playground.

First, I created a directory named ~/.duv in my home directory to contain this index.html file.

You could just simply download the file with cd ~/.duv; curl -O https://gist.githubusercontent.com/zdk/a56d06b57cd1886962ca/raw/3e8f3fde5c197ed7ba5313ec58bdfc01d30082a5/index.html

Then, curl https://gist.githubusercontent.com/zdk/52ec43ddb411d770384f/raw/80d3cb5f1a8175a6819a38861d12b433fbdda861/.zshrc >> ~/.zshrc

Or append the following content in your ~/.zshrc

Reload your changed in zsh for current running shell, by doing so: source ~/.zshrc

And this was it. You can simply use duv command and get visualized report instead of du -s *

comments powered by Disqus