|
1 <!DOCTYPE html> |
|
2 <html> |
|
3 <head> |
|
4 <meta http-equiv="Content-type" content="text/html; charset=utf-8"> |
|
5 <title>Chord Diagram</title> |
|
6 <script type="text/javascript" src="../../d3.js"></script> |
|
7 <script type="text/javascript" src="../../d3.layout.js"></script> |
|
8 <style type="text/css"> |
|
9 |
|
10 body { |
|
11 font: 10px sans-serif; |
|
12 } |
|
13 |
|
14 path.chord { |
|
15 fill-opacity: .67; |
|
16 } |
|
17 |
|
18 </style> |
|
19 </head> |
|
20 <body> |
|
21 <script type="text/javascript"> |
|
22 |
|
23 var r1 = 960 / 2, |
|
24 r0 = r1 - 120; |
|
25 |
|
26 var fill = d3.scale.category20c(); |
|
27 |
|
28 var chord = d3.layout.chord() |
|
29 .padding(.04) |
|
30 .sortSubgroups(d3.descending) |
|
31 .sortChords(d3.descending); |
|
32 |
|
33 var arc = d3.svg.arc() |
|
34 .innerRadius(r0) |
|
35 .outerRadius(r0 + 20); |
|
36 |
|
37 var svg = d3.select("body").append("svg:svg") |
|
38 .attr("width", r1 * 2) |
|
39 .attr("height", r1 * 2) |
|
40 .append("svg:g") |
|
41 .attr("transform", "translate(" + r1 + "," + r1 + ")"); |
|
42 |
|
43 d3.json("../data/flare-imports.json", function(imports) { |
|
44 var indexByName = {}, |
|
45 nameByIndex = {}, |
|
46 matrix = [], |
|
47 n = 0; |
|
48 |
|
49 // Returns the Flare package name for the given class name. |
|
50 function name(name) { |
|
51 return name.substring(0, name.lastIndexOf(".")).substring(6); |
|
52 } |
|
53 |
|
54 // Compute a unique index for each package name. |
|
55 imports.forEach(function(d) { |
|
56 d = name(d.name); |
|
57 if (!(d in indexByName)) { |
|
58 nameByIndex[n] = d; |
|
59 indexByName[d] = n++; |
|
60 } |
|
61 }); |
|
62 |
|
63 // Construct a square matrix counting package imports. |
|
64 imports.forEach(function(d) { |
|
65 var source = indexByName[name(d.name)], |
|
66 row = matrix[source]; |
|
67 if (!row) { |
|
68 row = matrix[source] = []; |
|
69 for (var i = -1; ++i < n;) row[i] = 0; |
|
70 } |
|
71 d.imports.forEach(function(d) { row[indexByName[name(d)]]++; }); |
|
72 }); |
|
73 |
|
74 chord.matrix(matrix); |
|
75 |
|
76 var g = svg.selectAll("g.group") |
|
77 .data(chord.groups) |
|
78 .enter().append("svg:g") |
|
79 .attr("class", "group"); |
|
80 |
|
81 g.append("svg:path") |
|
82 .style("fill", function(d) { return fill(d.index); }) |
|
83 .style("stroke", function(d) { return fill(d.index); }) |
|
84 .attr("d", arc); |
|
85 |
|
86 g.append("svg:text") |
|
87 .each(function(d) { d.angle = (d.startAngle + d.endAngle) / 2; }) |
|
88 .attr("dy", ".35em") |
|
89 .attr("text-anchor", function(d) { return d.angle > Math.PI ? "end" : null; }) |
|
90 .attr("transform", function(d) { |
|
91 return "rotate(" + (d.angle * 180 / Math.PI - 90) + ")" |
|
92 + "translate(" + (r0 + 26) + ")" |
|
93 + (d.angle > Math.PI ? "rotate(180)" : ""); |
|
94 }) |
|
95 .text(function(d) { return nameByIndex[d.index]; }); |
|
96 |
|
97 svg.selectAll("path.chord") |
|
98 .data(chord.chords) |
|
99 .enter().append("svg:path") |
|
100 .attr("class", "chord") |
|
101 .style("stroke", function(d) { return d3.rgb(fill(d.source.index)).darker(); }) |
|
102 .style("fill", function(d) { return fill(d.source.index); }) |
|
103 .attr("d", d3.svg.chord().radius(r0)); |
|
104 |
|
105 }); |
|
106 |
|
107 </script> |
|
108 </body> |
|
109 </html> |