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)

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.

One Response to “dod3catgraph”

[…] 12th, 2012 at 12:52 am You know what, I just wrote a ton of stuff covering some projects, like dod3catgraph and pensievr, and also documenting my time at Redwood Systems. I’m counting that as four days […]