|
| 1 | +import * as d3 from "d3"; |
| 2 | +import curry from "lodash/curry"; |
| 3 | + |
| 4 | +export default curry(function d3ChordDiagram(data, node) { |
| 5 | + |
| 6 | + //FIXME revert to dynamic data after demo!! |
| 7 | + var matrix = [ |
| 8 | + [ 7., 1., 5., 0., 1., 0.], |
| 9 | + [ 0., 4., 3., 0., 0., 0.], |
| 10 | + [ 6., 2., 17., 1., 1., 1.], |
| 11 | + [ 0., 0., 1., 0., 0., 0.], |
| 12 | + [ 2., 0., 0., 0., 3., 0.], |
| 13 | + [ 0., 0., 1., 0., 0., 4.]]; |
| 14 | + |
| 15 | + // Returns the Flare package name for the given class name. |
| 16 | + // function name(name) { |
| 17 | + // return name.substring(0, name.lastIndexOf(".")).substring(6); |
| 18 | + // } |
| 19 | + // |
| 20 | + // Compute a unique index for each package name. |
| 21 | + // data.forEach(function(d) { |
| 22 | + // if (!indexByName.has(d = name(d.name))) { |
| 23 | + // nameByIndex.set(n, d); |
| 24 | + // indexByName.set(d, n++); |
| 25 | + // } |
| 26 | + // }); |
| 27 | + // |
| 28 | + // // Construct a square matrix counting package imports. |
| 29 | + // data.forEach(function(d) { |
| 30 | + // var source = indexByName.get(name(d.name)), |
| 31 | + // row = matrix[source]; |
| 32 | + // if (!row) { |
| 33 | + // row = matrix[source] = []; |
| 34 | + // for (var i = -1; ++i < n;) row[i] = 0; |
| 35 | + // } |
| 36 | + // d.imports.forEach(function(d) { |
| 37 | + // row[indexByName.get(name(d))]++; |
| 38 | + // }); |
| 39 | + // }); |
| 40 | + |
| 41 | + //FIXME should be the innerwidth of the tab container, not the entire window |
| 42 | + var width = window.innerWidth / 2; |
| 43 | + var height = width; |
| 44 | + var innerRadius = Math.min(width, height) * 0.35; |
| 45 | + var outerRadius = innerRadius * 1.1; |
| 46 | + var formatValue = d3.formatPrefix(",.0", 1e3); |
| 47 | + var color = d3.scaleOrdinal(d3.schemeCategory20c); |
| 48 | + |
| 49 | + var chord = d3.chord() |
| 50 | + .padAngle(0.05) |
| 51 | + .sortSubgroups(d3.descending); |
| 52 | + |
| 53 | + var arc = d3.arc() |
| 54 | + .innerRadius(innerRadius) |
| 55 | + .outerRadius(outerRadius); |
| 56 | + |
| 57 | + var ribbon = d3.ribbon() |
| 58 | + .radius(innerRadius); |
| 59 | + |
| 60 | + var svg = d3.select(node) |
| 61 | + .attr("id", "visual") |
| 62 | + .attr("width", width) |
| 63 | + .attr("height", height) |
| 64 | + .attr("preserveAspectRatio", "xMinYMid") |
| 65 | + .attr("viewBox", "0 0 " + width + " " + height); |
| 66 | + |
| 67 | + //FIXME janky positioning fix with '((width / 2) - 40)' |
| 68 | + var g = svg.append("g") |
| 69 | + .attr("transform", "translate(" + ((width / 2) - 40) + "," + (height / 2) + ")") |
| 70 | + .datum(chord(matrix)); |
| 71 | + |
| 72 | + |
| 73 | + var group = g.append("g") |
| 74 | + .attr("class", "groups") |
| 75 | + .selectAll("g") |
| 76 | + .data(function(chords) {return chords.groups;}) |
| 77 | + .enter().append("g") |
| 78 | + .style("fill", function(d) {return color(d.index);}); |
| 79 | + |
| 80 | + group.append("path") |
| 81 | + .style("fill", function(d) {return color(d.index);}) |
| 82 | + .style("stroke", function(d) {return d3.rgb(color(d.index)).darker();}) |
| 83 | + .attr("d", arc) |
| 84 | + .on("mouseover", fade(0.05)) |
| 85 | + .on("mouseout", fade(1)); |
| 86 | + |
| 87 | + var groupTick = group.selectAll(".group-tick") |
| 88 | + .data(function(d) {return groupTicks(d, 1e3);}) |
| 89 | + .enter().append("g") |
| 90 | + .attr("class", "group-tick") |
| 91 | + .attr("transform", function(d) {return "rotate(" + (d.angle * 180 / Math.PI - 90) + ") translate(" + outerRadius + ",0)";}); |
| 92 | + |
| 93 | + groupTick.append("line") |
| 94 | + .attr("x2", 6); |
| 95 | + |
| 96 | + //FIXME add text from the matrix to the ticks |
| 97 | + groupTick.filter(function(d) {return d.value % 5e3 === 0;}) |
| 98 | + .append("text") |
| 99 | + .attr("x", 8) |
| 100 | + .attr("dy", ".35em") |
| 101 | + .attr("transform", function(d) {return d.angle > Math.PI ? "rotate(180) translate(-16)" : null;}) |
| 102 | + .style("text-anchor", function(d) {return d.angle > Math.PI ? "end" : null;}) |
| 103 | + .text(function(d) {return formatValue(d.value);}); |
| 104 | + |
| 105 | + g.append("g") |
| 106 | + .attr("class", "ribbons") |
| 107 | + .selectAll("path") |
| 108 | + .data(function(chords) {return chords;}) |
| 109 | + .enter().append("path") |
| 110 | + .attr("d", ribbon) |
| 111 | + .style("fill", function(d) {return color(d.target.index);}) |
| 112 | + .style("stroke", function(d) {return d3.rgb(color(d.target.index)).darker();}) |
| 113 | + .style("opacity", 0.9) |
| 114 | + .on("mouseover", fadeChord(0.05, 0.05)) |
| 115 | + .on("mouseout", fadeChord(1, 0.9)); |
| 116 | + |
| 117 | + // Returns an array of tick angles and values for a given group and step. |
| 118 | + function groupTicks(d, step) { |
| 119 | + var k = (d.endAngle - d.startAngle) / d.value; |
| 120 | + return d3.range(0, d.value, step).map(function(value) { |
| 121 | + return { |
| 122 | + value: value, |
| 123 | + angle: value * k + d.startAngle + (d.endAngle - d.startAngle) / 2 |
| 124 | + }; |
| 125 | + }); |
| 126 | + } |
| 127 | + |
| 128 | + function fade(opacity) { |
| 129 | + return function(g, i) { |
| 130 | + svg.selectAll(".chord path") |
| 131 | + .filter(function(d) { |
| 132 | + return d.source.index != i && d.target.index != i; |
| 133 | + }) |
| 134 | + .transition() |
| 135 | + .style("opacity", opacity); |
| 136 | + }; |
| 137 | + } |
| 138 | + |
| 139 | + function fadeChord(opacityArcs, opacityChords) { |
| 140 | + return function(g, i) { |
| 141 | + svg.selectAll(".chord path") |
| 142 | + .filter(function(d,j) { return j!=i; }) |
| 143 | + .transition() |
| 144 | + .style("opacity", opacityChords); |
| 145 | + svg.selectAll(".arc path") |
| 146 | + .filter(function(d) { return !(d.index == g.source.index || d.index == g.target.index); }) |
| 147 | + .transition() |
| 148 | + .style("opacity", opacityArcs); |
| 149 | + }; |
| 150 | + } |
| 151 | + |
| 152 | + function resize() { |
| 153 | + var targetWidth = window.innerWidth / 2; |
| 154 | + var svg = d3.select("#visual"); |
| 155 | + svg.attr("width", targetWidth); |
| 156 | + svg.attr("height", targetWidth / (width / height)); |
| 157 | + } |
| 158 | + window.onresize = resize; |
| 159 | +}); |
| 160 | + |
| 161 | +//d3.select(self.frameElement).style("height", outerRadius * 2 + "px"); |
0 commit comments