Last active
August 29, 2015 14:06
-
-
Save jdspersonal/7c237415c5dbb60cf270 to your computer and use it in GitHub Desktop.
This file contains 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
<!DOCTYPE html> | |
<meta charset="utf-8"> | |
<style> | |
.node { | |
font: 300 11px "Helvetica Neue", Helvetica, Arial, sans-serif; | |
fill: #282828 ; | |
} | |
.node:hover { | |
fill: #000; | |
} | |
.link { | |
stroke: steelblue; | |
stroke-opacity: .4; | |
fill: none; | |
pointer-events: none; | |
} | |
.node:hover, | |
.node--source, | |
.node--target { | |
font-weight: 700; | |
} | |
.node--source { | |
fill: #2ca02c; | |
} | |
.node--target { | |
fill: #d62728; | |
} | |
.link--source, | |
.link--target { | |
stroke-opacity: 1; | |
stroke-width: 2px; | |
} | |
.link--source { | |
stroke: #d62728; | |
} | |
.link--target { | |
stroke: #2ca02c; | |
} | |
</style> | |
<body bgcolor="#f2f0e4"> | |
<script src="http://d3js.org/d3.v3.min.js"></script> | |
<script> | |
var diameter = 700, | |
radius = diameter / 2, | |
innerRadius = radius - 120; | |
var cluster = d3.layout.cluster() | |
.size([360, innerRadius]) | |
.sort(null) | |
.value(null); | |
var bundle = d3.layout.bundle(); | |
var line = d3.svg.line.radial() | |
.interpolate("bundle") | |
.tension(1) | |
.radius(function(d) { return d.y; }) | |
.angle(function(d) { return d.x / 180 * Math.PI; }); | |
var svg = d3.select("body").append("svg") | |
.attr("width", diameter + 40) | |
.attr("height", diameter + 40) | |
.append("g") | |
.attr("transform", "translate(" + radius + "," + radius + ")"); | |
var link = svg.append("g").selectAll(".link"), | |
node = svg.append("g").selectAll(".node"); | |
d3.json("prereq.json", function(error, classes) { | |
var nodes = cluster.nodes(packageHierarchy(classes)), | |
links = packageImports(nodes); | |
link = link | |
.data(bundle(links)) | |
.enter().append("path") | |
.each(function(d) { d.source = d[0], d.target = d[d.length - 1]; }) | |
.attr("class", "link") | |
.attr("d", line); | |
node = node | |
.data(nodes.filter(function(n) { return !n.children; })) | |
.enter().append("text") | |
.attr("class", "node") | |
.attr("dy", ".31em") | |
.attr("transform", function(d) { return "rotate(" + (d.x - 90) + ")translate(" + (d.y + 8) + ",0)" + (d.x < 180 ? "" : "rotate(180)"); }) | |
.style("text-anchor", function(d) { return d.x < 180 ? "start" : "end"; }) | |
.text(function(d) { return d.key; }) | |
.on("mouseover", mouseove) | |
.on("mouseout", mouseout); | |
}); | |
function mouseove(d) { | |
node | |
.each(function(n) { n.target = n.source = false; }); | |
link | |
.classed("link--target", function(l) { if (l.target === d) return l.source.source = true; }) | |
.classed("link--source", function(l) { if (l.source === d) return l.target.target = true; }) | |
.filter(function(l) { return l.target === d || l.source === d; }) | |
.each(function() { this.parentNode.appendChild(this); }); | |
node | |
.classed("node--target", function(n) { return n.target; }) | |
.classed("node--source", function(n) { return n.source; }); | |
} | |
function mouseout(d) { | |
link | |
.classed("link--target", false) | |
.classed("link--source", false); | |
node | |
.classed("node--target", false) | |
.classed("node--source", false); | |
} | |
d3.select(self.frameElement).style("height", diameter + "px"); | |
// Lazily construct the package hierarchy from class names. | |
function packageHierarchy(classes) { | |
var map = {}; | |
function find(name, data) { | |
var node = map[name], i; | |
if (!node) { | |
node = map[name] = data || {name: name, children: []}; | |
if (name.length) { | |
node.parent = find(name.substring(0, i = name.lastIndexOf("."))); | |
node.parent.children.push(node); | |
node.key = name.substring(i + 1); | |
} | |
} | |
return node; | |
} | |
classes.forEach(function(d) { | |
find(d.name, d); | |
}); | |
return map[""]; | |
} | |
// Return a list of imports for the given array of nodes. | |
function packageImports(nodes) { | |
var map = {}, | |
imports = []; | |
// Compute a map from name to node. | |
nodes.forEach(function(d) { | |
map[d.name] = d; | |
}); | |
// For each import, construct a link from the source to target node. | |
nodes.forEach(function(d) { | |
if (d.imports) d.imports.forEach(function(i) { | |
imports.push({source: map[d.name], target: map[i]}); | |
}); | |
}); | |
return imports; | |
} | |
</script> |
This file contains 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
[ | |
{ | |
"name":"COMPUTER SCIENCE", | |
"imports": | |
[ | |
"CS.CMPS 5J", | |
"CS.CMPS 11", | |
"CS.CMPS 12A/L", | |
"CS.CMPS 12B/M", | |
"CS.CMPS 13H/L", | |
"CS.CMPS 101", | |
"CS.CMPS 102", | |
"CS.CMPS 104A", | |
"CS.CMPS 111", | |
"CS.CMPS 112", | |
"CS.CMPS 130" | |
] | |
}, | |
{"name":"MATH 19A","imports":["COMPUTER SCIENCE", "COMPUTER ENGINEERING"]}, | |
{"name":"MATH 19B","imports":["COMPUTER SCIENCE", "COMPUTER ENGINEERING"]}, | |
{"name":"MATH 23A","imports":["COMPUTER SCIENCE", "COMPUTER ENGINEERING"]}, | |
{"name":"AMS 10 or MATH 21","imports":["COMPUTER SCIENCE", "COMPUTER ENGINEERING"]}, | |
{"name":"AMS 20","imports":["COMPUTER ENGINEERING"]}, | |
{"name":"PHYSICS 5A/L","imports":["COMPUTER ENGINEERING"]}, | |
{"name":"PHYSICS 5B/M or CMPE 9","imports":["COMPUTER ENGINEERING"]}, | |
{"name":"PHYSICS 5C/N","imports":["COMPUTER ENGINEERING"]}, | |
{"name":"PHYSICS 6A/L or 5A/L","imports":["COMPUTER SCIENCE"]}, | |
{"name":"PHYSICS 6B/M or 5B/M","imports":["COMPUTER SCIENCE"]}, | |
{"name":"PHYSICS 6C/N or 5C/N","imports":["COMPUTER SCIENCE"]}, | |
{ | |
"name":"COMPUTER ENGINEERING", | |
"imports": | |
[ | |
"CE.CMPE 12/L", | |
"CE.CMPE 13/L", | |
"CE.CMPE 100/L", | |
"CE.CMPE 110", | |
"CE.CMPE 121/L", | |
"CE.CMPE 185#", | |
"CE.CMPE 80E" | |
] | |
}, | |
{"name":"CS.CMPS 5J","imports":[]}, | |
{"name":"CS.CMPS 11","imports":[]}, | |
{"name":"CS.CMPS 12A/L","imports":[]}, | |
{"name":"CS.CMPS 12B/M","imports":["COMPUTER ENGINEERING"]}, | |
{"name":"CS.CMPS 13H/L","imports":[]}, | |
{"name":"CS.CMPS 101","imports":["COMPUTER ENGINEERING"]}, | |
{"name":"CS.CMPS 102","imports":[]}, | |
{"name":"CS.CMPS 104A","imports":[]}, | |
{"name":"CS.CMPS 111","imports":[]}, | |
{"name":"CS.CMPS 112","imports":[]}, | |
{"name":"CS.CMPS 130","imports":[]}, | |
{"name":"CE.CMPE 12/L","imports":["COMPUTER SCIENCE"]}, | |
{"name":"CE.CMPE 13/L","imports":[]}, | |
{"name":"CE.CMPE 100/L", "imports":[]}, | |
{"name":"CE.CMPE 110","imports":["COMPUTER SCIENCE"]}, | |
{"name":"CE.CMPE 121/L", "imports":[]}, | |
{"name":"CE.CMPE 185#", "imports":[]}, | |
{"name":"CE.CMPE 80E", "imports":[]} | |
] |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment