Pixel?tag=viewcontent&noscript=1
 

Bubble Activity Graph, a better commit list for busy people

By Bill Harding at 8:47pm on April 25, 2019

I'm excited to announce the release of my favorite Static Object feature we've built so far. We're calling it the Bubble Activity Graph (henceforth, BAG). Depending on the repo being viewed, it will look something like this:

The BAG acronym is apt, considering how many pieces of commit data this visualization bundles together into a compact space. In the vertical height of a couple hundred pixels, BAG communicates:

  • How many commits (one bubble = one commit) and how big an impact (more impact = bigger bubble) is being made through the day, per committer
  • Who made the commit? Each color corresponds to a committer (we cycle colors when there are more than 7 committers)
  • How the committer's activity is spread over time. The further left the bubble, the earlier in the day the work occurred
  • Which commit(s) to review when time is sparse? The bigger commits correspond to greater impact, so if you only have time to spot check a couple commits, start with "the ones that look big"

To that final point, here's how BAG lights up with deeper info on hover:

So meta 😃

Hovering on my own commit bubble shows the commit message, the time of day for the commit (I should maybe get more sleep?), and the specific amount of Line Impact accumulated.

In some respects, the BAG follows in the footsteps of Gitprime and Velocity's bubble-centric commit visualizations. The biggest difference is that, since our product is focused on deriving a single, reliable code metric, the size of the bubble tells a story about which commits hold the most meaningful work for review.

The second biggest difference is that BAG accelerates code review. In the next few weeks, we're hoping to launch a free tool that helps developers follow the activity happening in popular open source repos. BAG is at the heart of making it easier for casual developers to quickly find out what's happening in repos they care about. Take for example, Ruby on Rails:

 

Or React Native:

Whether the repo has many committers or few, and whether those committers work in small commits or large, BAG condenses their work to its graphical essence. We think it's the fastest way to grok what's happening in a repo.

By way of representing commit workflows with visual precision, BAG makes code review more approachable for managers and new developers. Compared to its forebearer, the venerable commit list, it saves time. Moving forward, it will be a cornerstone feature of our product. Some of the ideas we're kicking around for version 2 include:

  • Implement a "hand grabber" pointer, so you can "grab" the graph to scroll backward or forward through the work has occurred over time
  • When hovering on a committer, provide a Slack-style "emoji reaction" box, to let committers (particularly open source committers) know that their work is much appreciated 👍👍
  • When new work is committed, "pop" a new bubble onto the canvas in real time (you can't see from these static screenshots, but BAG actually animates all these bubbles into place. It's weirdly entertaining to watch)

We'd love to hear how you might utilize the Bubble Activity Graph in your project, and which features you think we should add to it next.

Also! If you think that a feature like this would help you better follow the work happening in open source repos, that would be valuable intel for us to possess. We'd like to provide this as a free service, but the development cost for our small team figures to be high, so it's our hope to validate that anyone would want to use this on the open source projects they follow?