Git Visualization

25 oct 14 - MeetupJS Singapore

Joshua Koo

Joshua Koo


Zopim / Zendesk

Git Visualization

Git Visualization

(in JS of course, duh)


a brief history...




#ph41L for s0URC3


Three Source


Tree Source or Source Tree

maybe, Tree Sauce?


rgc() {
    git commit -m"`curl -s`"

Our CTO has discovered an incredible way of making developers read his commit messages. You won’t even believe how he did it!



how can we present git history in a way its useful and appealing?

Twitter Code Swarm



  • Build a Git Log viewer that runs in the browser
  • Animate directory structure of repository over time


  • How do we get git data in JS to the browser?
  • How do we render huge amount of logs?
  • How do we visualize a git folder structure automatically?
  • How do we build a nice UI?

Git Data in JS

  1. Github API
  2. Pipe Data from Command Line
  3. node.js Bindings
  4. Git in JS

Data Needed

  • Git logs
    • author
    • message
    • date
    • hash
  • Git tree diffs
    • filenames
    • add
    • delete
    • modified

Pipe from Process

var exec = require('child_process').exec;

exec(GIT_LOG_CMD, {
  cwd: cwd,
  maxBuffer: 1024 * 1024 * 200 // abuse memory up to 200MB ;P
}, function (error, stdout, stderr) {
  // handle and parse stdout here


fs.writeFileSync(OUTPUT_JSON_FILE, json, 'utf8');

Custom Git Log format

git log --raw -m --pretty=format:"bla" --encoding=UTF-8

Where "bla" = pretty format placeholders


git log --help


  • Build the graph paths in memory
  • Graph is rendered on Canvas
  • Row Rendering is done with a virtual view port

I wrote about virtual rendering some time ago on here and here

Directory Rendering

  1. Get directory structure at commit #####
  2. layout algorithm
  3. WebGL?

Git Tree

git ls-tree -r COMMIT

Cache directory filenames

Force Directed Layouts

Nodes with simulated forces

Minilistic event dispatcher

npm install do.js
var Do = require('do.js');
var onFire = new Do();'bla');


One Big Hack but a WIP

suggestions, ideas, comments

Thank you

Git & Visualization

By Joshua Koo

Git & Visualization

slides for presentation for SingaporeJS talk.js meetup

  • 3,067
Loading comments...

More from Joshua Koo