• Say hello to the Network Graph Visualizer

    mojombo 10 Apr 2008

    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 Thu Apr 10 12:04:07 -0700 2008

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

    technoweenie Thu Apr 10 12:12:04 -0700 2008

    Well, there’s always gitk :)

    ropiku Thu Apr 10 12:46:02 -0700 2008

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

    fbrunel Thu Apr 10 16:19:18 -0700 2008

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

    melo Thu Apr 10 20:34:39 -0700 2008

    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 Fri Apr 11 00:41:04 -0700 2008

    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 Fri Apr 11 10:17:42 -0700 2008

    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 Fri Apr 11 11:33:57 -0700 2008

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

    mojombo Sat Apr 12 15:33:32 -0700 2008

    @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 Sat Apr 12 21:01:14 -0700 2008

    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 Mon Apr 14 11:37:11 -0700 2008

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

    dgtized Wed Apr 16 13:09:13 -0700 2008

    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 Thu Apr 17 07:56:38 -0700 2008

    @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?

    bakedweb Thu Jul 10 07:16:57 -0700 2008

    Praise the lord!!!

    CooLMaN Tue Jul 15 21:46:04 -0700 2008

    Why is flash required here?

    AArnott Sun Aug 31 10:36:39 -0700 2008

    Way awesome!

    svanzoest Tue Sep 23 16:43:35 -0700 2008

    Hmm.. Does this also support showing tags? I am only seeing branches.

    ptr Tue Oct 07 23:39:30 -0700 2008

    This is a flash. Unacceptable technology. Sorry.

    yarikoptic Thu Dec 11 11:41:27 -0800 2008

    At some moment I wanted to create similar plot to reveal the dynamics between the people/branches committing to the git repository. One of the aspects was to track not only merges (which is obvious) but also cherry picks which are often used by people in the ‘maintenance’ branches.

    You can view my attempt to accomplish the mission at http://git.onerussian.com/?p=code/snippets.git;a=blob;f=graphviz_plot.py;hb=HEAD

    It does NOT have cool graphics thow, just would generate graph.dot to be visualized by graphviz. One big step which I’ve not accomplished much I believe was to tight it to timeline… and organize ‘by the owner’, although I believe I’ve tried to track the branches (which is not an obvious thing if history of head changes not available) ;-) in any case - it was just a prototype, but may be someone finds pieces of it of interest. ;)

    dumpster1 Thu Dec 25 19:30:05 -0800 2008

    Call today 908-313-9888 ask for Joe Dicellis. WE TAKE AWAY ANY KIND OF TRASH. The other waste companies do not even come close to what we offer.

    Waste removal call and we haul . Professional debris removal of anykind . We do all the work. Uniform employees. Always up front prices . Always

    dalloliogm Fri Jan 09 09:41:30 -0800 2009

    a question: is the mojombo’s repository updated to the 26th of March? How can I tell which is the ‘ufficial’ version of the repository?

    tehmoth Wed Feb 11 04:35:06 -0800 2009

    as others have said, this requires flash, not even gnash will do, way to go. I’m sure some solution with SVG/Canvas/Javascript would work, and work better.

    jasonmp85 Mon Feb 16 02:15:38 -0800 2009

    Can someone please explain the Flash hate? I really want to know. Is it crucial you use this on your iPhone/other mobile device? Or are you one of those clowns that won’t install “proprietary” binaries?

    This is a great feature. If it’s compelling enough for you to install flash, do so. If not, get to work on a competitor.

    I’m not “sure some solution with SVG/Canvas/Javascript” would work better. Sure, it would work for people like me running Webkit nightlies or FF3 betas, but Flash works everywhere.

    Git guys, keep up the good work.

    zpmorgan Wed Mar 04 16:50:58 -0800 2009

    No, it really doesn’t work everywhere. It reaches most PCs, but Flash not even 10% as cross-platform as linux.

    This is a wonderful feature, though.

    veged Sat Mar 07 14:09:11 -0800 2009

    there is bug with unicode commit titles on popups

    mxcl Tue Mar 24 04:10:15 -0700 2009

    I lol at the flash haters. Get real.

    vitch Wed Apr 22 17:37:49 -0700 2009

    It would be great to add a fullscreen button so people can utilise all of their screen size to view the graph. I just wished for that feature when viewing the jekyll network graph which is pretty big and complex!

    Barrucadu Sun Apr 26 14:05:35 -0700 2009

    It would be amazing if the data could be accessed as an SVG file (or PNG) . These graphs could make great desktop wallpapers :p
    I think it's an amazing feature.

    GothAlice Sat May 09 01:21:59 -0700 2009

    +1 to SVG export of the graphs. Also, doesn't appear to recognize cherry-pick'ed merges. (I'm new to Git, so I'm not sure what's so different about cherry-picking specific commits vs. merging everything from a fork as of a certain time.)

    ImmoRtaL Tue Jun 02 11:28:39 -0700 2009

    :,)

    Gavinwang Fri Jun 19 02:30:32 -0700 2009

    this my first time to use github, how to check in my code? confiused

    niclash Mon Jul 20 00:14:03 -0700 2009

    I am pretty new to Git and did a simple test;
    1. niclash forked qi4j/core
    2. niclash cloned locally and made a change, committed and pushed back
    3. niclash went to qi4j/core Fork Queue and "Apply" the commit sitting there.

    Now, if I understand it correctly, the 'niclash/qi4j-core' commit should 'merge' back into qi4j/core, but the graph mark it as a new commit, with the same comment and both qi4j and niclash as the authors. So the graph continues to show both branches...

    What am I missing here?

    lemojhon Sat Jul 25 22:48:17 -0700 2009

    I want to plot social network visualization, but don't want to do much of programming pet names. Does anyone know a piece of software that can do plotting, zooming in out but does not require much of programming? Say, i could provide my data in format it accepts and bah - i have a java application, flash or anything displaying my graph.

    georgechemy Wed Jul 29 07:02:58 -0700 2009

    The spatial arrangement of the vertices is controlled by the DrL visualisation algorithm wireless internet- you can find a link to the homepage of the algorithm in the "Technical details" section. In a nutshell, this is a force-directed layout; think about the nodes of the network as tiny particles and the edges as springs that connect the particles. The algorithm searches for an equilibrium position, but of course there are several tricks that make the whole computation feasible for 75 000 vertices and 3 million edges. As for the identity of the nodes, a zoomable version of the map

    nanotube Wed Aug 12 21:36:51 -0700 2009

    flash sucks, because it is one of the most common sources of firefox crashes, and since the implementation is not open source, it is impossible for the community to track those down and fix them.

    that said, this is one of the nicer (read: actually useful) uses of flash. however, it would have been even nicer to have a google-maps-style interface, which does not require a proprietary plugin in order to work.

    jfreund Mon Aug 17 09:17:39 -0700 2009

    Yep, it's really a pity that the network graph is in flash - to all those who claimed to not understand an anti-flash attitude: There are several OSes out there that are not supported by Adobe, so no flash player is available on them. And no, it's not only smart phones, but all Unix derivates apart from Linux, Solaris and Mac OS X (e. g. all flavours of BSD, AIX, IRIX, ...). If you're developing on one of them, you cannot use the network graph. All other technologies required to use github (well, mostly git, a ssh client and a web 2.0 compliant browser) are available as open source, so they can be directly used or at least be ported to nearly any OS.

    drescherjm Thu Aug 27 06:57:21 -0700 2009

    The network graph seems to always be out of date now and it never updates. Is there anything I can do to get the up to date version.

    nybras Thu Sep 03 07:17:00 -0700 2009

    Yes, its always out of date, it's getting me nervous. :(

    bio Mon Sep 07 01:11:48 -0700 2009

    rtsdfdsfds

    thoughtless Fri Sep 18 18:10:55 -0700 2009

    I'm also seeing graphs that are not updating, even after more than a day.

    sentientbit Sat Sep 19 07:07:06 -0700 2009

    It seems to take up to 2 days to see an update.

    ryankearney Sun Sep 27 20:50:45 -0700 2009

    Graph could not be drawn due to a network IO problem.

    Been getting this ever since I forked a project over a week ago. Never seems to work, even after the move to rackspace.

    brady12 Mon Sep 28 03:20:07 -0700 2009

    The algorithm searches for an equilibrium position, but of course there are several tricks that make the whole computation feasible for 75 000 vertices and 3 million edges. As for the identity of the nodes, a zoomable version of the map
    Assignment Help | Coursework Help | Dissertation Help

    brady12 Mon Sep 28 03:20:22 -0700 2009

    Is there anything I can do to get the up to date version.
    Essay Help | Thesis Help

    drescherjm Wed Sep 30 07:16:53 -0700 2009

    Hmm. Seems to be working again for the last day..

    ryankearney Tue Oct 06 08:56:54 -0700 2009

    Graph could not be drawn due to a network IO problem.

    AnnaLee Wed Oct 14 00:49:32 -0700 2009

    If people buy essays and order custom essay about Say hello to the Network Graph Visualizer, this would be possible to have superior quality.

    AnnaLee Wed Oct 14 00:50:36 -0700 2009

    If people buy essays and order custom essay about Say hello to the Network Graph Visualizer, this would be possible to have superior quality.

    tmilker Wed Oct 14 07:35:00 -0700 2009

    I wish there was a way to see the Network for a repository, rather than a person. I do not really care about other people's random stuff, I am interested in changes others have made to their forked copies of a repository. mojombo/grit is a great example. 80 people in the network but it takes a lot of clicking and scrolling and pain to see just the changes to the forked repositories of others to make sure I am not duplicating work.

    Alex80 Fri Oct 16 02:29:09 -0700 2009

    The clients count on this resume service cause they are very responsible! The organization produces resume service to fit the precise range of science you prefer.

    Soofi Sat Oct 17 20:27:03 -0700 2009

    You can always buy new computer and order it from www.OrderComputer.com, be it HP, Dell, IBM, Sony or whichever!!

    Marie-Curie Sun Oct 25 09:51:53 -0700 2009

    Marie Curie say: Thank a lot, it is so usefull for me, keep it going on

    AJHEELS Thu Oct 29 14:17:10 -0700 2009

    For information and products relating to height increase or footcare please visit HEELSNCLEAVAGE
    Thats great, Ive messed around with Zookeeper a few times
    HEEL PADS
    SHOE INSOLE
    INCREASE MY HEIGHT
    INCREASE YOUR HEIGHT

    MelisaP Tue Nov 03 04:25:45 -0800 2009

    Wonderful post!!!! games

    Please log in to comment.