--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/toolkit/javascript/d3/examples/chord/chord-flare.html Thu Apr 10 14:20:23 2014 +0200
@@ -0,0 +1,109 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta http-equiv="Content-type" content="text/html; charset=utf-8">
+ <title>Chord Diagram</title>
+ <script type="text/javascript" src="../../d3.js"></script>
+ <script type="text/javascript" src="../../d3.layout.js"></script>
+ <style type="text/css">
+
+body {
+ font: 10px sans-serif;
+}
+
+path.chord {
+ fill-opacity: .67;
+}
+
+ </style>
+ </head>
+ <body>
+ <script type="text/javascript">
+
+var r1 = 960 / 2,
+ r0 = r1 - 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(r0)
+ .outerRadius(r0 + 20);
+
+var svg = d3.select("body").append("svg:svg")
+ .attr("width", r1 * 2)
+ .attr("height", r1 * 2)
+ .append("svg:g")
+ .attr("transform", "translate(" + r1 + "," + r1 + ")");
+
+d3.json("../data/flare-imports.json", function(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("svg:g")
+ .attr("class", "group");
+
+ g.append("svg:path")
+ .style("fill", function(d) { return fill(d.index); })
+ .style("stroke", function(d) { return fill(d.index); })
+ .attr("d", arc);
+
+ g.append("svg: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(" + (r0 + 26) + ")"
+ + (d.angle > Math.PI ? "rotate(180)" : "");
+ })
+ .text(function(d) { return nameByIndex[d.index]; });
+
+ svg.selectAll("path.chord")
+ .data(chord.chords)
+ .enter().append("svg: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(r0));
+
+});
+
+ </script>
+ </body>
+</html>