• Say hello to the Network Graph Visualizer

    mojombo Apr 10

    Our goal here at GitHub is to break down the barriers that normally impede collaboration. One of the biggest challenges that we face as developers is keeping track of what other contributors have done. I’ve spent the last month working on GitHub’s answer to that problem and so we’re very pleased to announce the interactive GitHub Network Graph Visualizer!

    Above you’ll see a screenshot of the network graph of my god repository (click it for the real deal). On the left hand side is a list of GitHub users. Across from each user is drawn a graph of commits. Since I’ve asked for the graph to be drawn with me (mojombo) as the root, every commit on every branch that I currently have in my repository (mojombo/god) will be graphed across from my name. If you look at the second user in the list (Bertg), you’ll see that only commits that appear in his repository (Bertg/god) but not mine are drawn across from him. The third user (kevinclark) has commits that appear in neither my repo nor Bertg’s repo. And so on.

    When you look at the graph you are seeing every commit on every branch of every repository that belongs to a network. But you are seeing each commit only once. Let that sink in for a second. I find that many coders are so used to a centralized SCM that they miss the fact that our Graph Visualizer is actually showing and connecting disparate repositories. Git makes this possible and once it hits you, it can change everything.

    Think of it like this. If I draw the graph with myself as root, then the graph shows a sort of to-do list of code that I haven’t pulled into my repo yet. When I want to catch up on what the community has been doing in their forks of my repo, I can hit up the graph and see immediately what others have been up to. If I were to pull in Bertg’s changes, the next time I see the graph, Bertg will no longer be shown at all because he will no longer have any commits that I do not. Keep thinking to-do list and you’ll understand the graph.

    This method of drawing the graph may seem odd at first. If both Alice and I contribute to merb-core and at some point Alice pulls my commits into her repo, then I may not be shown on the network graph at all (if the graph ordered her before me). My commits would have already been drawn in her repo. It is important to realize that the graph is about code not ego. My code may be in my repository and yours and many others. Our individual repos are simply vehicles for introducing our code to the world. If we learn to let go of our code a little bit, we are rewarded ten-fold by what the community or our coworkers will do with that code.

    You can move around the graph by clicking and dragging it with your mouse. If you click in the graph, then you can use the arrow keys or vim movement keys (hjkl). Hold down the shift key while hitting left or right and you’ll go to the beginning/end of the graph. Press t to show/hide the tag markers. Hover over a commit for details about it. Click on a commit to be taken to that commit in a new window (makes it easy to come back to the graph without losing your place). Click a username to redraw the graph with that person as the root.

    Here’s a few more graphs that show some complex branching:

    You can see the graph for any repo by clicking the Network tab.

    • Comments

    • technomancy about 11 hours later

      Not many things make me wish I had Flash, but this is one of them.

    • technoweenie about 11 hours later

      Well, there’s always gitk :)

    • ropiku about 11 hours later

      Add complete url to links, on my feedreader I was sent to feeds.feedburner.com/wycats/...

    • fbrunel about 15 hours later

      That’s really awesome. Maybe the best visual representation I’ve seen so far. Congrats guys.

    • melo about 19 hours later

      I can only say: wow…
      The best part, and as far as I know (please prove me wrong) it beats gitk, is that you can use whichever person you want as root.
      Thanks!

    • jwilger about 23 hours later

      How long is the data cached after the graph is first created? I was checking it out while in the process of importing a behemoth project from Subversion with a ton of branches, and it didn’t seem to update with more branches after I viewed it the first time. Just curious.

    • mojombo 1 day later

      We currently cache the data for an hour. We’re working on optimizing the data generation speed so we can lower or eliminate the caching.

    • bartman 1 day later

      This is pretty cool… although gitk has this feature too.

    • mojombo 2 days later

      @bartman gitk can draw you a (pretty confusing, imho) graph of a single repository. You’d have to pull in all the branches you care about from the entire network in order to see other people’s work. The network graph on GitHub is designed to make it easy to see which people you should pull from, and what they’re up to without having to leave the site at all!

    • mdaines 2 days later

      I was excited to see the Rails visualization, since there are so many people in the network, but it basically seems to hang forever drawing it…
      Half-related: it’d be nice to have access to the network graph in the github API so people could make their own visualizations! Maybe that’s in the works already.

    • ceejayoz 4 days later

      @mdaines – I’m having the same problem with the Rails graph. A pity. :-(

    • dgtized 6 days later

      How come you can’t click on a commit in the history and jump to the commit in the repository? The fact that it lists the revision id is useless if you can’t copy paste it because it disappears if you move your mouse off of it.

    • mojombo 7 days later

      @dgtized you certainly can click a commit dot in the graph to be taken to that commit. This obviates the need to be able to copy the ID from the graph. Were you unable to click a commit dot?

    • kevinwatters 25 days later

      Like mdaines said, the rails viz doesn’t ever seem to render a graph :[ that or I’m just impatient.

    Participate

    Please log in to comment.