Skip to content

Instantly share code, notes, and snippets.

@straypacket

straypacket/index.html

Created June 26, 2013 23:58
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save straypacket/5872867 to your computer and use it in GitHub Desktop.
Save straypacket/5872867 to your computer and use it in GitHub Desktop.
Download ZIP
Hierarchical edge bundling, adapted from Mike Bostock's work and Danny Holten's paper: http://www.win.tue.nl/~dholten/papers/bundles_infovis.pdf
Raw
index.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<link type="text/css" rel="stylesheet" href="flare-style.css"/>
<style type="text/css">
path.arc {
cursor: move;
fill: #fff;
}
.node {
font-size: 10px;
}
.node:hover {
fill: #1f77b4;
}
.link {
fill: none;
stroke: #1f77b4;
stroke-opacity: .2;
pointer-events: none;
}
.link.source, .link.target {
stroke-opacity: 1;
stroke-width: 2px;
}
.node.target {
fill: #d62728 !important;
}
.link.source {
stroke: #d62728;
}
.node.source {
fill: #2ca02c;
}
.link.target {
stroke: #2ca02c;
}
</style>
</head>
<body>
<h2>
</h2>
<div style="position:absolute;bottom:0;font-size:18px;">tension: <input style="position:relative;top:3px;" type="range" min="0" max="100" value="85"></div>
<script src="http://d3js.org/d3.v3.min.js"></script>
<!--<script type="text/javascript" src="d3.js"></script>
<script type="text/javascript" src="d3.layout.js"></script>-->
<script type="text/javascript" src="packages.js"></script>
<script type="text/javascript">
var w = 1280,
h = 800,
rx = w / 2,
ry = h / 2,
m0,
rotate = 0;
var splines = [];
var cluster = d3.layout.cluster()
.size([360, ry - 120])
.sort(function(a, b) { return d3.ascending(a.key, b.key); });
var bundle = d3.layout.bundle();
var line = d3.svg.line.radial()
.interpolate("bundle")
.tension(.85)
.radius(function(d) { return d.y; })
.angle(function(d) { return d.x / 180 * Math.PI; });
// Chrome 15 bug: <http://code.google.com/p/chromium/issues/detail?id=98951>
var div = d3.select("body").insert("div", "h2")
.style("top", "-80px")
.style("left", "-160px")
.style("width", w + "px")
.style("height", w + "px")
.style("position", "absolute")
.style("-webkit-backface-visibility", "hidden");
var svg = div.append("svg:svg")
.attr("width", w)
.attr("height", w)
.append("svg:g")
.attr("transform", "translate(" + rx + "," + ry + ")");
svg.append("svg:path")
.attr("class", "arc")
.attr("d", d3.svg.arc().outerRadius(ry - 120).innerRadius(0).startAngle(0).endAngle(2 * Math.PI))
.on("mousedown", mousedown);
d3.json("sample-imports.json", function(classes) {
var nodes = cluster.nodes(packages.root(classes)),
links = packages.imports(nodes),
splines = bundle(links);
var path = svg.selectAll("path.link")
.data(links)
.enter().append("svg:path")
.attr("class", function(d) { return "link source-" + d.source.key + " target-" + d.target.key; })
.attr("d", function(d, i) { return line(splines[i]); })
.style("stroke-width", function(d) { return (d.source.size/100000)+"px"; });
svg.selectAll("g.node")
.data(nodes.filter(function(n) { return !n.children; }))
.enter().append("svg:g")
.attr("class", "node")
.attr("id", function(d) { return "node-" + d.key; })
.attr("transform", function(d) { return "rotate(" + (d.x - 90) + ")translate(" + d.y + ")"; })
.append("svg:text")
.attr("dx", function(d) { return d.x < 180 ? 8 : -8; })
.attr("dy", ".31em")
.attr("text-anchor", function(d) { return d.x < 180 ? "start" : "end"; })
.attr("transform", function(d) { return d.x < 180 ? null : "rotate(180)"; })
.text(function(d) { return d.shown_key; })
.on("mouseover", mouseover)
.on("mouseout", mouseout);
d3.select("input[type=range]").on("change", function() {
line.tension(this.value / 100);
path.attr("d", function(d, i) { return line(splines[i]); });
});
});
d3.select(window)
.on("mousemove", mousemove)
.on("mouseup", mouseup);
function mouse(e) {
return [e.pageX - rx, e.pageY - ry];
}
function mousedown() {
m0 = mouse(d3.event);
d3.event.preventDefault();
}
function mousemove() {
if (m0) {
var m1 = mouse(d3.event),
dm = Math.atan2(cross(m0, m1), dot(m0, m1)) * 180 / Math.PI;
div.style("-webkit-transform", "translateY(" + (ry - rx) + "px)rotateZ(" + dm + "deg)translateY(" + (rx - ry) + "px)");
}
}
function mouseup() {
if (m0) {
var m1 = mouse(d3.event),
dm = Math.atan2(cross(m0, m1), dot(m0, m1)) * 180 / Math.PI;
rotate += dm;
if (rotate > 360) rotate -= 360;
else if (rotate < 0) rotate += 360;
m0 = null;
div.style("-webkit-transform", null);
svg
.attr("transform", "translate(" + rx + "," + ry + ")rotate(" + rotate + ")")
.selectAll("g.node text")
.attr("dx", function(d) { return (d.x + rotate) % 360 < 180 ? 8 : -8; })
.attr("text-anchor", function(d) { return (d.x + rotate) % 360 < 180 ? "start" : "end"; })
.attr("transform", function(d) { return (d.x + rotate) % 360 < 180 ? null : "rotate(180)"; });
}
}
function mouseover(d) {
svg.selectAll("path.link.target-" + d.key)
.classed("target", true)
.each(updateNodes("source", true));
svg.selectAll("path.link.source-" + d.key)
.classed("source", true)
.each(updateNodes("target", true));
}
function mouseout(d) {
svg.selectAll("path.link.source-" + d.key)
.classed("source", false)
.each(updateNodes("target", false));
svg.selectAll("path.link.target-" + d.key)
.classed("target", false)
.each(updateNodes("source", false));
}
function updateNodes(name, value) {
return function(d) {
if (value) this.parentNode.appendChild(this);
svg.select("#node-" + d[name].key).classed(name, value);
};
}
function cross(a, b) {
return a[0] * b[1] - a[1] * b[0];
}
function dot(a, b) {
return a[0] * b[0] + a[1] * b[1];
}
</script>
</body>
</html>
Raw
packages.js
(function() {
packages = {
// Lazily construct the package hierarchy from class names.
root: function(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) + Math.floor(Math.random()*10000000);
node.shown_key = name.substring(i + 1).replace('_asp','.asp');
}
}
return node;
}
classes.forEach(function(d) {
find(d.name, d);
});
return map[""];
},
// Return a list of imports for the given array of nodes.
imports: function(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[0]]});
});
});
return imports;
}
};
})();
Raw
sample-imports.js
[
{"imports": [["/home_asp", 1]], "name": "/member/entry_asp", "size": 1},
{"imports": [["/subject_past/index_asp", 1]], "name": "/home_asp", "size": 1},
{"imports": [["/subject_past/index_asp", 135],
["/case/index_asp", 2],
["/journal/index_asp", 1],
["/subject_past/subject_detail_asp", 1]],
"name": "/subject_past/index_asp",
"size": 139},
{"imports": [["/case/index_asp", 13],
["/search/index_asp", 1],
["/information/index_asp", 1]],
"name": "/case/index_asp",
"size": 15},
{"imports": [["/search/index_asp", 3],
["/society_list/recommend_society_asp", 1]],
"name": "/search/index_asp",
"size": 4},
{"imports": [["/subject_past/index_asp", 1]],
"name": "/society_list/recommend_society_asp",
"size": 1},
{"imports": [["/journal/FilePreview_Journal_asp", 1]],
"name": "/journal/index_asp",
"size": 1},
{"imports": [["/subject_past/index_asp", 1],
["/journal/FilePreview_Journal_asp", 7]],
"name": "/journal/FilePreview_Journal_asp",
"size": 8},
{"imports": [["/subject_past/index_asp", 1]],
"name": "/information/index_asp",
"size": 1},
{"imports": [], "name": "/subject_past/subject_detail_asp", "size": 0}
]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment