gistfile1.js

            mg.create(function(g) {
		g.define('Commit', {color: 'orange',
				    radius: function(){ return 5 },
				    opacity: 0.8})
		    .define('Person', {color: 'lightBlue',
				       committed: function(){ return (this.author$in.length ? this.author$in : [this.author$in]); },
				       radius: function(){ return 30+(5*this.committed().length) },
				       opacity: 0.3})
		    .from("https://api.github.com/repos/"+user+"/"+project+"/commits?callback=loadCommits&per_page=100")
		    .transform(function(prop,obj) {
			if(prop == null) {
			    delete obj.meta;
			} else if(prop === 'data') {
			    obj.$id = obj.url;
			    obj.$type = 'Commit';
			    obj.message = obj.commit.message;
			    obj.tree = obj.commit.tree;
			    if(obj.author && obj.commit.author) {
          			obj.author.email = obj.commit.author.email;
				obj.author.name = obj.commit.author.name;
			    }
			    obj.date = new Date(obj.commit.author.date);
			    delete obj.commit;
			} else if(prop === 'committer' || prop === 'author') {
			    obj.$id = obj.url;
			    obj.$type = 'Person';
			} else if(prop === 'parents' || prop === 'tree') {
			    obj.$id = obj.url;
			    obj.$type = 'Commit';
			    delete obj.url;
			    delete obj.sha;
			}
		    })
		    .load(function() {		     
			var people = {};
			var commits = {};
			var nodes = [];
			var links = [];
			g.where({$type: 'Person',
				 author$in: {}})
			    .all()
			    .instances(function(authors) {
				for(var i=0; i<authors.length; i++) {
				    people[authors[i].$id] = authors[i];
				    nodes.push(authors[i]);
				}
			    })
			    .where({$type: 'Commit',
				    author:{}})
			    .all()
			    .instances(function(gitdata) {
				console.log(gitdata.length);
				for(var i=0; i<gitdata.length; i++) {
				    if(commits[gitdata[i].$id] == null) {
					commits[gitdata[i].$id] = gitdata[i];
					nodes.push(gitdata[i]);
				    }
				}
			    })
			    .where({$id: g._s, author:g._t})
			    .tuples(function(ls) {
				for(var i=0; i<ls.length; i++) {
				    var source = commits[ls[i].s.$id];
				    var target = people[ls[i].t.$id];
				    if(source!=null && target != null)
					links.push({source: source, target: target});
				}
			    })
			    .where({$id: g._x, parents:g._y})
			    .tuples(function(ls) {
				for(var i=0; i<ls.length; i++) {
				    var source = commits[ls[i].x.$id];
				    var target = commits[ls[i].y.$id];
				    if(source != null && target != null)
					links.push({source: source, target: target});
				}

				var w = 1200;
				var h = 900;
				var vis = d3.select("#graph-chart").append("svg:svg").
				    attr("width",w).
				    attr("height",h);

				var force = d3.layout.force()
				    .charge(-180)
				    .linkDistance(30)
				    .nodes(nodes)
				    .links(links)
				    .size([w,h])
				    .start();

				var link = vis.selectAll("link.link")
				    .data(links)
				    .enter().append("svg:line")
				    .style("stroke-width", function(d) { return 1; })
				    .style("stroke", "#999999")
				    .style("stroke-opacity", 0.6)
				    .attr("x1", function(d) { return d.source.x; })
				    .attr("y1", function(d) { return d.source.y; })
				    .attr("x2", function(d) { return d.target.x; })
				    .attr("y2", function(d) { return d.target.y; });

				var node = vis.selectAll("g.node")
				    .data(nodes)
				    .enter().append("g")
				    .attr("class", "node");

				node.append("svg:title")
			       	    .text(function(d) { return d.$id });

				node.append("svg:circle")
				    .attr("cx", function(d) { return d.x; })
				    .attr("cy", function(d) { return d.y; })
				    .attr("r", function(d){ return d.radius(); })
				    .style("fill", function(d){  return d.color })
				    .style("fill-opacity",function(d){ return d.opacity })
				    .attr('class', function(d){ return d.$type })
				    .call(force.drag);

				node.filter(function(d){ return d.$type === 'Person'})
				    .append("image")
				    .attr("width","32")
				    .attr("height","32")
				    .attr("x","-16")
				    .attr("y","-16")
				    .attr("xlink:href",function(d){ return d.avatar_url; })
				    .call(force.drag);


				force.on("tick", function() {
				    link.attr("x1", function(d) { return d.source.x; })
					.attr("y1", function(d) { return d.source.y; })
					.attr("x2", function(d) { return d.target.x; })
					.attr("y2", function(d) { return d.target.y; });
				    
				    node.select("circle")
					.attr("cx", function(d) { return d.x; })
					.attr("cy", function(d) { return d.y; });

				    node.select("image")
					.attr("x",function(d){ return d.x - 16})
					.attr("y",function(d){ return d.y - 16});
				});
			    });
		    });
	    });

	}