106 строки
2.7 KiB
HTML
106 строки
2.7 KiB
HTML
<!DOCTYPE html>
|
|
<meta charset="utf-8">
|
|
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
|
|
<title>Chord Diagram</title>
|
|
<script src="../../d3.js"></script>
|
|
<style>
|
|
|
|
body {
|
|
font: 10px sans-serif;
|
|
}
|
|
|
|
path.chord {
|
|
fill-opacity: .67;
|
|
}
|
|
|
|
</style>
|
|
<body>
|
|
<script>
|
|
|
|
|
|
var outerRadius = 960 / 2,
|
|
innerRadius = outerRadius - 120;
|
|
|
|
var fill = d3.scale.category20c();
|
|
|
|
var chord = d3.layout.chord()
|
|
.padding(.04)
|
|
.sortSubgroups(d3.descending)
|
|
.sortChords(d3.descending);
|
|
|
|
var arc = d3.svg.arc()
|
|
.innerRadius(innerRadius)
|
|
.outerRadius(innerRadius + 20);
|
|
|
|
var svg = d3.select("body").append("svg")
|
|
.attr("width", outerRadius * 2)
|
|
.attr("height", outerRadius * 2)
|
|
.append("g")
|
|
.attr("transform", "translate(" + outerRadius + "," + outerRadius + ")");
|
|
|
|
d3.json("../data/flare-imports.json", function(error, imports) {
|
|
var indexByName = {},
|
|
nameByIndex = {},
|
|
matrix = [],
|
|
n = 0;
|
|
|
|
// Returns the Flare package name for the given class name.
|
|
function name(name) {
|
|
return name.substring(0, name.lastIndexOf(".")).substring(6);
|
|
}
|
|
|
|
// Compute a unique index for each package name.
|
|
imports.forEach(function(d) {
|
|
d = name(d.name);
|
|
if (!(d in indexByName)) {
|
|
nameByIndex[n] = d;
|
|
indexByName[d] = n++;
|
|
}
|
|
});
|
|
|
|
// Construct a square matrix counting package imports.
|
|
imports.forEach(function(d) {
|
|
var source = indexByName[name(d.name)],
|
|
row = matrix[source];
|
|
if (!row) {
|
|
row = matrix[source] = [];
|
|
for (var i = -1; ++i < n;) row[i] = 0;
|
|
}
|
|
d.imports.forEach(function(d) { row[indexByName[name(d)]]++; });
|
|
});
|
|
|
|
chord.matrix(matrix);
|
|
|
|
var g = svg.selectAll("g.group")
|
|
.data(chord.groups)
|
|
.enter().append("g")
|
|
.attr("class", "group");
|
|
|
|
g.append("path")
|
|
.style("fill", function(d) { return fill(d.index); })
|
|
.style("stroke", function(d) { return fill(d.index); })
|
|
.attr("d", arc);
|
|
|
|
g.append("text")
|
|
.each(function(d) { d.angle = (d.startAngle + d.endAngle) / 2; })
|
|
.attr("dy", ".35em")
|
|
.attr("text-anchor", function(d) { return d.angle > Math.PI ? "end" : null; })
|
|
.attr("transform", function(d) {
|
|
return "rotate(" + (d.angle * 180 / Math.PI - 90) + ")"
|
|
+ "translate(" + (innerRadius + 26) + ")"
|
|
+ (d.angle > Math.PI ? "rotate(180)" : "");
|
|
})
|
|
.text(function(d) { return nameByIndex[d.index]; });
|
|
|
|
svg.selectAll("path.chord")
|
|
.data(chord.chords)
|
|
.enter().append("path")
|
|
.attr("class", "chord")
|
|
.style("stroke", function(d) { return d3.rgb(fill(d.source.index)).darker(); })
|
|
.style("fill", function(d) { return fill(d.source.index); })
|
|
.attr("d", d3.svg.chord().radius(innerRadius));
|
|
|
|
});
|
|
|
|
</script>
|