I write some graph visualization tools for around two years now, and I missed several occasions to work fully on a specific case – most of the time because the tools I had with me at the time did not fit exactly to the dataset. But that time I have been luckier: I was finishing a first version of my new SiGMa core, when I wanted some data to play with. I found the @psychemedia’s Friendviz (Twitter network visualized with Protovis), and tried to feed my graph visualization core with Web APIs.

Especially, I played with Github API, and I showed it to a colleague, Franck, who made at linkfluence last year a really nice visualization of the followers network of Github. So, I showed my prototype to him, and he told me that he was actually not only reprocessing Github’s data to do a new visualization, but also that he was looking for an interactive way to explore his results. Here is how we started to work on StarGit.

I will focus here on the choices we made about ergonomy and interface. If you are interested about the data or the server-side technologies, you should take a look at Franck’s blog post about StarGit.

What we wanted:

The goal was to make possible for a Github user to see his ego-centered network, like with InMaps for LinkedIn users. Since Franck is an active user of Github (which is not my case, I’ve never contributed to any project), he wanted to observe how programmers do collaborate with others, instead of the social network side of Github. So, lot of users will not appear on Stargit (including me, actually). But at the same time, that makes most of the networks definitely smaller than if it was followers networks, and made possible to use a client-side graph managment, instead of a server-side application that processes the networks, like with InMaps.

The graph:

It was not that easy to obtain for each user a graph that is significant, and also not to big to be well processed by the client application. Even with only the collaborations in the network, some “super-users” were still making some networks totally unbalanced. And also, lot of users do not have enough connections to make the graph interesting.

So, to make the networks relevant to watch:

• We include the frontiers in the graphs. So basically, a user will find his neighbors and their neighbors in his network.
• To avoid the “star effect” (if I have a neighbor who has 1000 neighbors I don’t care about, they will look like a huge star on my network, which is not what I want), we remove all the leaves (nodes with only one neighbor).
• We blacklisted the 100 biggest users, until we find a way to integrate them in the networks relevantly.

The interface:

The best Web interfaces I know to explore networks are most about visualizing a map (like the excellent linkfluence maps interface, or the recent Flashless Raphael Velt’s maps interface). The network has already its shape, users zoom and move the map like with Google Maps, and a caption is here to explain what mean the different graphic components (nodes sizes, nodes colors, etc).

At the same time, I personally enjoy playing with Gephi and chosing what I want to see in my graphs. For example, in Stargit, I mean that the user might like to see by himself if his nearest neighbors share his main programming language, or his country, or a specific project…

So, here is how works Stargit interface:

• An input field is at the same time the title of the network, and one way to change the network, by writing another user’s login.
• The nodes color and size are defined by two different comboboxes, and the user can chose what he wants to see in the network.
• When the user rolls the mouse over a node, the main information about this node (avatar, website, country, etc) will be displayed at the bottom-middle of the screen.
• When a user clicks on a node, it will display the network centered on this node.

About the layout algorithm, I implemented in SiGMa with a little help from my brother his fresh new ForceAtlas2, also available in Gephi (with a nice blog post about it). I will tell more about this new SiGMa core in a later post. The sources of the Flash project are available here.

Here it is, I hope you will enjoy browsing this huge and so much interesting database that is Github, with Stargit!