dod3catgraph

It’s gratifying to watch the participation graphs on your github page go up, up, up as you make more commits. However, it’s hard to see what you’ve been up to across all your repositories: I wanted to be able to see it all in a bigger graph, with some sense of scale and comparison between repos. Hence, dod3catgraph.

Try it out

GO! TRY IT! (if you don’t have a github account you want to see, you can try mine, thenoviceoof)

Now, wasn’t that fun?

Making of

Honestly, this was more of an excuse to play with d3.js (it is frightening to think that might become a web address soon), the successor of the data visualization library Protovis, which I had played around with before. However, Protovis is no longer in active development, and one simply must keep up with the jonses, so I decided to do something with d3.js.

I tried to avoid hitting the server backend, I really did: using something like Cross Origin Resource Sharing (CORS) with purely server-side javascript would mean the server would not constrain things. However, it turns out what I wanted (the commit counts) was not covered by github’s CORS implementation (which is good, because it’s not actually part of the API). So, I essentially proxied the data through Google App Engine with caching, and that was that.

At this point in time, there are several things not implemented: for instance, if the app hits rate-limits put in place by github, it should allow the user to sign in with OAuth and then view the repos. However, that part is just not implemented. There are some other bugs and enhancements one could make (gah! All the repos look the same!) but I’ve done what I’ve come to do, so that’s all fine.

As for d3: I adapted the code from an example, and got stuck halfway through, spending a day or two with my head against the wall. It turns out that re-binding the data for stacked bars is not so simple: I got around it by editing the bound data structure in place.

Design-wise, it turns out I had to load the data piecemeal: waiting for some 30 requests to load was going to take too long, and d3 excels at the sort of live updating that the loading required. However, this meant that pre-allocating the colors (which are evenly distributed through the HSV color space) meant that sometimes like colors would end up next to each other, which was bad. Hence, I randomly sorted the repos before starting: this also meant that the vertical order of the repos on the graph would get mixed up, so that if you got a bad visualization one time, it would work out better the next (now that I think about it, like colors will always end up next to each other. I should fix that).

Also, I didn’t feel like creating a scale that changed, and ended up using a parabolic scale. I should note that it would probably be relatively easy to do so, though.

Name

Again, I tried hard to choose a good name for the project: in this case, octograph was already taken, which was my first choice (from github’s octocat, and, um, a graph). I also wanted to integrate d3 into it, possibly with a leet flavor. After coming up with the hideous stimmoctograph (octograph, prepended with commits spelled backwards), I started playing around with variations of dodecahedron. From there, it was a short hop to dod3catgraph: it’s more obviously referencing a geometrical shape (versus decahedron), integrates d3, refers to octocat, and also includes graph. It’s actually kind of ugly, but it uniquely conveys the purpose of the page, so it’s fine by me.

Download

Same old Github dance; if you want to download the code and have git installed, either execute:

git clone git://github.com/thenoviceoof/dod3catgraph.git

or go to the github page and download the code as a zip file (as of January 2011, the button is labeled ZIP).