Paul Hammant's Blog: Angular Commit Bubbles
I’m obsessed with the pseudo-declarative side of Angular. Making HTML turing-complete was a stroke of genius. To test the theory, and towards something that would be genuinely useful, I thought I’d blow the dust off something else that Miško had made in the past…
Miško Hevery wrote an ActionScript app that showed the enthusiasm for testing of the developers within a team. He’d previously worked at Adobe and was quite skilled with the Flash eco-system. I’m sure he’s forgotten much of that now, given how significant and time consuming Angular has become. Former ThoughtWorker Jon Wolter blogged about it. I think Jon even helped Miško develop it a couple of years before. We only have screen-shots of the original app to go with:
Anyway, we recreated it in Angular as a team-effort after-work activity. To be fair it’s also an Angular teaching tool for people new to it, with me switching between “product owner” and “Angular coder” as needed. It served as a tutorial for SVG too, as it happens.
If you have IE 10 or better, you can play with it here (mobile too): https://paul-hammant.github.io/angular-commit-bubbles/
The checkboxes and buttons work. They remove (or add back) committers so that you can hone in on best performer (or worst, or both). You can also click on bubbles for an overlay showing more info about the commit. That’s only a jpeg above though, so don’t get too upset if you’ve been clicking it. The real deal is here
Also, the bubbles need have an area that is proportional to the size of the commit, not the radius. Pi-R-squared manipulated can give us that.
A D3 Alternative
Colleague Pawel Badenski forked my repo, and quickly made a D3 version of the same thing. I don’t want to give him too much publicity, so I’ll leave it at that 😛
20% less lines of code, grumble grumble……
Feb 14th, 2015: Goes hand in hand with I wish Subversion had a query language which shows how to turn diffs into JSON that shows the prod:test ratio for a commit.