Chordratio & new chord SVG

Makefile

@@ -169,6 +169,7 @@ d3.layout.js: \
 	src/layout/layout.js \
 	src/layout/bundle.js \
 	src/layout/chord.js \
+	src/layout/chordratio.js \
 	src/layout/force.js \
 	src/layout/partition.js \
 	src/layout/pie.js \

d3.v2.js

@@ -3061,9 +3061,26 @@
   };
   d3.svg.chord = function() {
     var source = d3_svg_chordSource, target = d3_svg_chordTarget, radius = d3_svg_chordRadius, startAngle = d3_svg_arcStartAngle, endAngle = d3_svg_arcEndAngle;
+    function dist2(p0, p1) {
+      var x = p1[0] - p0[0];
+      var y = p1[1] - p0[1];
+      return x * x + y * y;
+    }
+    function lerp(p0, t, p1) {
+      return [ (p1[0] - p0[0]) * t, (p1[1] - p0[1]) * t ];
+    }
     function chord(d, i) {
       var s = subgroup(this, source, d, i), t = subgroup(this, target, d, i);
-      return "M" + s.p0 + arc(s.r, s.p1, s.a1 - s.a0) + (equals(s, t) ? curve(s.r, s.p1, s.r, s.p0) : curve(s.r, s.p1, t.r, t.p0) + arc(t.r, t.p1, t.a1 - t.a0) + curve(t.r, t.p1, s.r, s.p0)) + "Z";
+      var c0, c1;
+      var lrp = .66;
+      if (dist2(s.p0, t.p1) > dist2(s.p1, t.p0)) {
+        c0 = lerp([ 0, 0 ], lrp, s.p0);
+        c1 = lerp([ 0, 0 ], lrp, t.p1);
+      } else {
+        c0 = lerp([ 0, 0 ], lrp, s.p1);
+        c1 = lerp([ 0, 0 ], lrp, t.p0);
+      }
+      return "M" + s.p0 + arc(s.r, s.p1, s.a1 - s.a0) + (equals(s, t) ? curve(s.p1, c0, c1, s.p0) : curve(s.p1, c0, c1, t.p0) + arc(t.r, t.p1, t.a1 - t.a0) + curve(t.p1, c1, c0, s.p0)) + "Z";
     }
     function subgroup(self, f, d, i) {
       var subgroup = f.call(self, d, i), r = radius.call(self, subgroup, i), a0 = startAngle.call(self, subgroup, i) + d3_svg_arcOffset, a1 = endAngle.call(self, subgroup, i) + d3_svg_arcOffset;
@@ -3081,8 +3098,8 @@
     function arc(r, p, a) {
       return "A" + r + "," + r + " 0 " + +(a > Math.PI) + ",1 " + p;
     }
-    function curve(r0, p0, r1, p1) {
-      return "Q 0,0 " + p1;
+    function curve(p0, c0, c1, p1) {
+      return "C " + c0 + " " + c1 + " " + p1;
     }
     chord.radius = function(v) {
       if (!arguments.length) return radius;
@@ -3962,6 +3979,164 @@
     };
     return chord;
   };
+  d3.layout.chordratio = function() {
+    var chord = {}, chords, groups, subgroups, matrix, n, m, padding = 0, normalize = 0, sortGroups, sortSubgroups, sortChords;
+    function relayout() {
+      var subgroupMap = {}, groupSums = [], groupIndex = d3.range(n), subgroupIndex = [], k, x, x0, i, j;
+      chords = [];
+      subgroups = [];
+      groups = [];
+      k = 0, i = -1;
+      while (++i < n) {
+        x = 0, j = -1;
+        while (++j < m) {
+          x += matrix[i][j];
+        }
+        groupSums.push(x);
+        subgroupIndex.push(d3.range(m));
+        k += x;
+      }
+      if (sortGroups) {
+        groupIndex.sort(function(a, b) {
+          return sortGroups(groupSums[a], groupSums[b]);
+        });
+      }
+      if (sortSubgroups) {
+        subgroupIndex.forEach(function(d, i) {
+          d.sort(function(a, b) {
+            return sortSubgroups(matrix[i][a], matrix[i][b]);
+          });
+        });
+      }
+      var scale = [];
+      if (normalize) {
+        i = -1;
+        while (++i < n) {
+          scale[i] = groupSums[i] > 0 ? 1 / groupSums[i] : 1;
+        }
+        k = (2 * Math.PI - padding * n) / n;
+      } else {
+        i = -1;
+        while (++i < n) {
+          scale[i] = 1;
+        }
+        k = (2 * Math.PI - padding * n) / k;
+      }
+      x = 0, i = -1;
+      while (++i < n) {
+        x0 = x, j = -1;
+        while (++j < m) {
+          var di = groupIndex[i], dj = subgroupIndex[di][j], v = matrix[di][dj];
+          if (v > 0) {
+            var a0 = x, a1 = x += v * k * scale[di];
+            subgroups.push(subgroupMap[di + "." + dj] = {
+              index: di,
+              subindex: dj,
+              startAngle: a0,
+              endAngle: a1,
+              value: v
+            });
+          }
+        }
+        if (normalize && groupSums[di] == 0) {
+          x += k;
+        }
+        groups[di] = {
+          index: di,
+          startAngle: x0,
+          endAngle: x,
+          value: groupSums[di] * scale[di]
+        };
+        x += padding;
+      }
+      j = -1;
+      while (++j < m) {
+        var maxItem = -1;
+        var maxValue = 0;
+        var items = [];
+        i = -1;
+        while (++i < n) {
+          if (subgroupMap.hasOwnProperty(i + "." + j)) {
+            var item = subgroupMap[i + "." + j];
+            if (item.value > 0) {
+              if (maxValue < item.value) {
+                maxValue = item.value;
+                maxItem = items.length;
+              }
+              items.push(item);
+            }
+          }
+        }
+        if (items.length > 1) {
+          var source = items[maxItem];
+          items.splice(maxItem, 1);
+          i = -1;
+          while (++i < items.length) {
+            chords.push({
+              source: source,
+              target: items[i]
+            });
+          }
+        }
+      }
+      if (sortChords) resort();
+    }
+    function resort() {
+      chords.sort(function(a, b) {
+        return sortChords((a.source.value + a.target.value) / 2, (b.source.value + b.target.value) / 2);
+      });
+    }
+    chord.matrix = function(x) {
+      if (!arguments.length) return matrix;
+      n = (matrix = x) && matrix.length;
+      m = matrix && matrix.length > 0 && matrix[0].length;
+      chords = groups = null;
+      return chord;
+    };
+    chord.padding = function(x) {
+      if (!arguments.length) return padding;
+      padding = x;
+      chords = subgroups = groups = null;
+      return chord;
+    };
+    chord.normalize = function(x) {
+      if (!arguments.length) return normalize;
+      normalize = x;
+      chords = groups = null;
+      return chord;
+    };
+    chord.sortGroups = function(x) {
+      if (!arguments.length) return sortGroups;
+      sortGroups = x;
+      chords = subgroups = groups = null;
+      return chord;
+    };
+    chord.sortSubgroups = function(x) {
+      if (!arguments.length) return sortSubgroups;
+      sortSubgroups = x;
+      chords = subgroups = null;
+      return chord;
+    };
+    chord.sortChords = function(x) {
+      if (!arguments.length) return sortChords;
+      sortChords = x;
+      if (chords) resort();
+      return chord;
+    };
+    chord.chords = function() {
+      if (!chords) relayout();
+      return chords;
+    };
+    chord.groups = function() {
+      if (!groups) relayout();
+      return groups;
+    };
+    chord.subgroups = function() {
+      if (!subgroups) relayout();
+      return subgroups;
+    };
+    return chord;
+  };
   d3.layout.force = function() {
     var force = {}, event = d3.dispatch("start", "tick", "end"), size = [ 1, 1 ], drag, alpha, friction = .9, linkDistance = d3_layout_forceLinkDistance, linkStrength = d3_layout_forceLinkStrength, charge = -30, gravity = .1, theta = .8, interval, nodes = [], links = [], distances, strengths, charges;
     function repulse(node) {

examples/chord/chord-ratio.html

@@ -0,0 +1,176 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
+    <title>Chord Ratio Diagram</title>
+    <script type="text/javascript" src="../../d3.v2.js"></script>
+    <style type="text/css">
+        body {
+            font: 12px sans-serif;
+        }
+        svgdiv {
+            width: 90%;
+            height: 80%;
+        }
+        svg {
+            max-height: 100%;
+        }
+    </style>
+  </head>
+  <body>
+    <script type="text/javascript">
+
+var fill = d3.scale.category20c();
+
+var matrix =
+[
+      [0,  5, 20,  0,  3],
+      [1,  0,  5,  0,  7],
+      [3,  0,  0,  0,  4]
+];
+
+var nameByIndex = ["foo", "bar", "baz"];
+
+var normalize = false;
+
+var chordratio = d3.layout.chordratio()
+    .padding(.04)
+    .normalize(normalize)
+    .sortSubgroups(d3.descending)
+    .sortChords(d3.descending)
+    .matrix(matrix);
+
+var minsize = Math.min(window.innerWidth, window.innerHeight * .8);
+var outerRadius = (minsize - 10) / 2,
+    innerRadius = outerRadius - 100;
+
+var arc = d3.svg.arc()
+    .innerRadius(innerRadius)
+    .outerRadius(innerRadius + 20);
+
+var svgcenter = d3.select("body").append("center");
+
+var svg = svgcenter.append("svg")
+    .attr("width", minsize)
+    .attr("height", minsize)
+    .append("g")
+        .attr("transform", "translate(" + outerRadius + "," + outerRadius + ")");
+
+var label = d3.select("body").append("center").append("p");
+
+label.text("Click on a segment");
+
+var norm = d3.select("body").append("center")
+	.append("span")
+	.text("Normalize")
+	.append("input")
+	.attr("type", "checkbox")
+	.property("checked", normalize ? 1 : null)
+	.on("click", function (d) { renormalize(this.checked); });
+
+function renormalize(n) {
+	normalize = n;
+	chordratio.normalize(normalize);
+	update();
+}
+
+function update() {
+	var g = svg.selectAll("g.group")
+	  .data(chordratio.groups);
+
+	function updateGroup(selection) {
+		selection
+			.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]; });
+	}
+
+	// these transitions should be redone in polar coordinates
+
+	g.select("text")
+	  .transition()
+	  .call(updateGroup);
+
+	g.enter().append("g")
+	  .attr("class", "group")
+	  .append("text")
+	  .transition()
+	  .call(updateGroup);
+
+	g.exit().transition().remove();
+
+	var sg = svg.selectAll("g.subgroup")
+	  .data(chordratio.subgroups);
+
+	function updateSubgroup(selection) {
+		selection
+			.style("fill", function(d) { return fill(d.index); })
+			.style("stroke", function(d) { return "#000000"; })
+			.attr("d", arc);
+	}
+
+	sg.select("path")
+	  .transition()
+	  .call(updateSubgroup);
+
+	sg.enter().append("g")
+	  .attr("class", "subgroup")
+	  .append("path")
+	  .on("mouseover", fade(.1))
+	  .on("mouseout", fade(.67))
+	  .on("click", show())
+	  .transition()
+	  .call(updateSubgroup);
+
+	sg.exit().transition().remove();
+
+	var c = svg.selectAll("path.chord")
+	  .data(chordratio.chords);
+
+	function updateChord(selection) {
+		selection
+			.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))
+			.style("opacity", .67);
+	}
+
+	c.transition().call(updateChord);
+
+	c.enter().append("path")
+	  .transition()
+	  .call(updateChord);
+
+	c.exit().transition().remove();
+
+	// an event handler for fading a given chord group
+	function fade(opacity) {
+		return function(g, i) {
+			svg.selectAll("path.chord")
+			.filter(function(d) {
+				return d.source.subindex != g.subindex && d.target.subindex != g.subindex;
+			})
+			.transition()
+			.style("opacity", opacity);
+	  };
+	}
+
+	function show() {
+		return function(g, i) {
+			label.text("\"" + nameByIndex[g.index] + "\", subindex " + g.subindex);
+	  };
+	}
+}
+
+update();
+
+    </script>
+  </body>
+</html>