D3 Examples - Force Directed GitHub Network Graph

Force Directed GitHub Network Graph
Here's a simple project I've been working on this weekend to finally learn D3.js. What you see here is a graph of repos and users that contribute to them with the repos displayed in blue and users in orange. You can click any repo to see it's commiters and any commiter to see repos they've commited to. It's pretty basic now, but I hope to turn it into a cool and unique way to browse GitHub repos.
xxxxxxxxxx
 
<html>
  <head>
    <meta charset="utf-8">
    <title>Explore GitHub</title>
​
    <script src="https://d3js.org/d3.v3.js" charset="utf-8"></script>
​
    <style type="text/css">
​
body {
  font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
  padding: 0px;
  margin: 0px;
}
​
circle.node {
  cursor: pointer;
  stroke: #000;
  stroke-width: .5px;
}
​
line.link {
  fill: none;
  stroke: #9ecae1;
  stroke-width: 1.5px;
}
​
div#chart-tooltip {
  background: #000;
  color: white;
  padding: 5px 10px;
  border-radius: 3px;
  font-size: 14px;
}
​
    </style>
  </head>
  <body>
    <script type="text/javascript">
​
var w = 1200,
    h = 600,
    node,
    link,
    root;
​
var force = d3.layout.force()
    .on("tick", tick)
    .charge(function(d) { return d._children ? d.size / 50 : -30; })
    .linkDistance(function(d) { return d.target._children ? 80 : 30; })
    .size([w, h - 160]);
​
var svg = d3.select("body").append("svg:svg")
    .attr("width", w)
    .attr("height", h);
​
var tooltip = d3.select("body").append("div")
    .attr("id", "chart-tooltip")
    .style("position", "absolute")
    .style("opacity", "0.0")
    .style("pointer-events", "none");
​
d3.xhr("https://api.github.com/repos/AFNetworking/AFNetworking", "application/vnd.github.beta+json", function(xhr) {
  root = JSON.parse(xhr.response);
  root.fixed = true;
  root.x = w / 2;
  root.y = h / 2 - 80;
  root.type = "repo"
  update();
});
​
function update() {
  var nodes = flatten(root),
      links = d3.layout.tree().links(nodes);
​
  // Restart the force layout…
  force
      .nodes(nodes)
      .links(links)
      .start();
​
  // Update the links…
  link = svg.selectAll("line.link")
      .data(links, function(d) { return d.target.id; });
​
  // Enter any new links…
  link.enter().insert("svg:line", ".node")
      .attr("class", "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; });
​
  // Exit any old links…
  link.exit().remove();
​
  node = svg.selectAll("circle.node")
      .data(nodes, function(d) { return d.id; })
      .style("fill", color)
​
  node.transition()
      .attr("r", function(d) { return d.children ? 4.5 : Math.sqrt(d.size) / 5; });
​
  // Enter any new nodes…
  node.enter().append("svg:circle")
      .attr("class", "node")
      .attr("cx", function(d) { return d.x; })
      .attr("cy", function(d) { return d.y; })
      .attr("r", function(d) { return d.children ? 4.5 : Math.sqrt(d.size) / 5; })
      .style("fill", color)
      .on("click", click)
      .on("mouseover", showTooltip)
      .on("mousemove", moveTooltip)
      .on("mouseout", hideTooltip)
      .call(force.drag);
​
  // Exit any old nodes…
  node.exit().remove();
}
​
function tick() {
  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.attr("cx", function(d) { return d.x; })
      .attr("cy", function(d) { return d.y; });
}
​
​
function color(d) {
  if (d.type === "repo") {
    return "#3498DB";
  } else if (d.type === "user") {
    return "#E74C3C"
  } else {
    return "#F0F";
  }
}
​
// Returns a list of all nodes under the root.
function flatten(root) {
  var nodes = [], i = 0;
​
  function recurse(node) {
    if (node.children) node.size = node.children.reduce(function(p, v) { return p + recurse(v); }, 0);
    if (!node.id) node.id = ++i;
    nodes.push(node);
    return node.size;
  }
​
  root.size = recurse(root);
  return nodes;
}
​
// Toggle children on click.
function click(d) {
  console.log(d.id)
  if (!d.expanded) {
    expandNode(d)
  } else if (d.children) {
    d._children = d.children;
    d.children = null;
  } else {
    d.children = d._children;
    d._children = null;
  }
  update();
}
​
// Load more remote info about a node.
function expandNode(d) {
  if (d.type === "repo") {
    var url = "https://api.github.com/repos/" + d.full_name + "/contributors?anon=1"
  } else if (d.type === "user") {
    var url = "https://api.github.com/users/" + d.login + "/repos"
  } else {
    return;
  }
​
  d3.xhr(url, "application/vnd.github.beta+json", function(xhr) {
    var response = JSON.parse(xhr.response);
    response.forEach(function(node) {
      node.type = (d.type === "repo" ? "user" : "repo");
      node.id = d.id + "-" + node.id;
      if (node.type === "user") {
        node.size = node.contributions;
      }
    });
​
    d.children = response;
    d.expanded = true;
​
    update();
  });
}
​
function showTooltip(d) {
  // Move the tooltip into place…
  tooltip
      .style("left", d3.event.pageX + "px")
      .style("top", d3.event.pageY + "px")
​
  if (d.type === "repo") {
    tooltip.text(d.full_name)
  } else {
    tooltip.text(d.login)
  }
​
  // Fade the tooltip in…
  tooltip.transition()
      .style("opacity", 0.7)
}
​
function moveTooltip(d) {
  // Move the tooltip into place…
  tooltip
      .style("left", d3.event.pageX + 16 + "px")
      .style("top", d3.event.pageY + "px")
}
​
function hideTooltip(d) {
  tooltip.transition()
    .style("opacity", "0.0");
}
​
    </script>
  </body>
</html>
    