How to recreate the GitHub Network Graph

Question

Are there any open source projects out there or jQuery plugin that I can use to recreate the GitHub Network Graph?

I want to create something with similar functionality.

Answer 1

The Github network views seem very difficult to reverse engineer at first. However, the code becomes quite understandable after de-minifying it with http://jsbeautifier.org/ . So run bundle_github.js and bundle_common.js through and grab a jQuery 1.4.2 source. Then you're ready to start reading the source / debugging the page.

In the Github Network page, if the canvas is working, the network is generated simply by:

var ng = new Network("#ng", 920, 600)

which goes on to use an object generated by defineNetwork(window.jQuery), which (among a lot of other things)

1. gets data from the Github Network API
2. creates instances of d.KeyDriver and d.MouseDriver for handling input
3. uses d.Chrome to draw timeline, header and footer
4. uses d.Graph to write the network graph

(each d.ClassName is an inner class of the Network object, thus their source is found inside the defineNetwork source code)

I didn't take the time to really delve into the code and find all the details on how it works, but it's readable alright. Now depending on what you want to do, you could e.g.

• (probably) make very minor modifications to get the code to render Github data outside github.com
• make your own data available in the Github Network API format, and visualize that
• adapt just the d.Graph class to work with your own data
• just read the code and learn

NOTE: You probably can't legally use the code as-is nor modified, so I recommend doing this only for learning purposes (though IANAL).

Answer 2

You may want to rely on Github's Network API that handles:

Listing all the data needed to draw the network graph, heads of every fork with new changes and all relevant commits.

As for the rendering, Github uses canvas to display its network graph. You may want to have a look at the RaphaelJS library does a good job rendering the Github's impact graphs: http://raphaeljs.com/github/impact.html