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.
Created
July 6, 2013 14:36
-
-
Save rhysforyou/5940092 to your computer and use it in GitHub Desktop.
Force Directed GitHub Network Graph
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>Explore GitHub</title> | |
| <script src="http://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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment