Basics for visualizing GIT history using d3 from some json. Makes a tooltip out of the details.

tree.js

var commits = [
{
 "parent": "e98bb31",
 "commit": "fb3a06f49b06fd7358c46c153b35ff6a29cd33cd",
 "author": "Kyle Harrigan <[email protected]>",
 "date": "Mon Mar 5 20:12:12 2012 -0500",
 "message": "Fortran-examples-and-automake-scripts"
},
{
 "parent": "3475367",
 "commit": "e98bb31dd9f40b137381b5382a7e8fe926cf3982",
 "author": "Kyle Harrigan <[email protected]>",
 "date": "Fri May 13 17:35:51 2011 -0400",
 "message": "Updated-makefile-and-README"
},
{
 "parent": "aea5e73",
 "commit": "347536755ab4d5a82eb235fdafc416302d133575",
 "author": "Kyle Harrigan <[email protected]>",
 "date": "Thu Apr 28 22:23:30 2011 -0400",
 "message": "Basic-object-example"
}];

var width = 960,
    height = 500;

var links = [
    {source: 2, target: 1},
    {source: 1, target: 0}];


var force = d3.layout.force()
    .nodes(d3.values(commits))
    .links(links)
    .size([width, height])
    .linkDistance(60)
    .charge(-300)
    .on("tick", tick)
    .start();

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

//svg.call(tip);

// Per-type markers, as they don't inherit styles.
svg.append("defs").selectAll("marker")
    .data(["default"])
  .enter().append("marker")
    .attr("id", function(d) { return d; })
    .attr("viewBox", "0 -5 10 10")
    .attr("refX", 15)
    .attr("refY", -1.5)
    .attr("markerWidth", 6)
    .attr("markerHeight", 6)
    .attr("orient", "auto")
  .append("path")
    .attr("d", "M0,-5L10,0L0,5");

var path = svg.append("g").selectAll("path")
    .data(force.links())
  .enter().append("path")
    .attr("class", function(d) { return "link default"; })
    .attr("marker-end", function(d) { return "url(#" + "default" + ")"; });

var div = d3.select("body").append("div")   
    .attr("class", "tooltip")  
.attr("width", "100px")
    .style("opacity", 0);

var circle = svg.append("g").selectAll("circle")
    .data(force.nodes())
    .enter().append("circle")
    .attr("r", 6)
    .call(force.drag)
    .on("mouseover", function(d) {      
        div.transition()        
        .duration(200)      
        .style("opacity", 0.9);      
        div.html( d.commit + "<br/>" + 
                  d.author + "<br/>" + 
                  d.date + "<br/>" + 
                  d.message)  
        .style("left", (d3.event.pageX) + "px")     
        .style("top", (d3.event.pageY - 28) + "px");    
    })                  
    .on("mouseout", function(d) {       
        div.transition()        
        .duration(500)      
        .style("opacity", 0);   
    });



var text = svg.append("g").selectAll("text")
    .data(force.nodes())
  .enter().append("text")
    .attr("x", 8)
    .attr("y", ".1em")
    .text(function(d) { return d.message; });

// Use elliptical arc path segments to doubly-encode directionality.
function tick() {
  path.attr("d", linkArc);
  circle.attr("transform", transform);
  text.attr("transform", transform);
}

function linkArc(d) {
  var dx = d.target.x - d.source.x,
      dy = d.target.y - d.source.y,
      dr = Math.sqrt(dx * dx + dy * dy);
  return "M" + d.source.x + "," + d.source.y + "A" + dr + "," + dr + " 0 0,1 " + d.target.x + "," + d.target.y;
}

function transform(d) {
  return "translate(" + d.x + "," + d.y + ")";
}

See here: http://jsfiddle.net/kwharrigan/qvzfN/2/