Skip to content

Instantly share code, notes, and snippets.

@kwharrigan kwharrigan/tree.js
Created Jul 22, 2014

Embed
What would you like to do?
Basics for visualizing GIT history using d3 from some json. Makes a tooltip out of the details.
var commits = [
{
"parent": "e98bb31",
"commit": "fb3a06f49b06fd7358c46c153b35ff6a29cd33cd",
"author": "Kyle Harrigan <kwharrigan@gmail.com>",
"date": "Mon Mar 5 20:12:12 2012 -0500",
"message": "Fortran-examples-and-automake-scripts"
},
{
"parent": "3475367",
"commit": "e98bb31dd9f40b137381b5382a7e8fe926cf3982",
"author": "Kyle Harrigan <kwharrigan@gmail.com>",
"date": "Fri May 13 17:35:51 2011 -0400",
"message": "Updated-makefile-and-README"
},
{
"parent": "aea5e73",
"commit": "347536755ab4d5a82eb235fdafc416302d133575",
"author": "Kyle Harrigan <kwharrigan@gmail.com>",
"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 + ")";
}
@kwharrigan

This comment has been minimized.

Copy link
Owner Author

commented Jul 22, 2014

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.