Introduce Improved Chord Diagram

This chart extends the basic `Chord` by simply wrapping it and altering its behavior through the exposed API.
bocoup · May 28, 2013 · fb3a460 · fb3a460
1 parent f6994da
commit fb3a460
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -9,6 +9,7 @@
 		<script src="scripts/bar-chart.js"></script>
 		<script src="scripts/fading-bar-chart.js"></script>
 		<script src="scripts/chord-diagram.js"></script>
+		<script src="scripts/improved-chord-diagram.js"></script>
 		<link rel="stylesheet" href="styles/index.css"></link>
 	</head>
 	<body>

diff --git a/scripts/app.js b/scripts/app.js
@@ -59,4 +59,7 @@
   });
   myCustomChord(matrix);
 
+  var myImprovedChord = ImprovedChord();
+  myImprovedChord(matrix);
+
 }(this));
diff --git a/scripts/improved-chord-diagram.js b/scripts/improved-chord-diagram.js
@@ -0,0 +1,18 @@
+window.ImprovedChord = function(options) {
+
+  "use strict";
+  var Chord = window.Chord;
+
+  var improvedChord = Chord(options);
+  improvedChord.colors = ["#000000", "#FFDD89", "#957244", "#F26224"];
+  improvedChord.layers.ticks.on("enter", function() {
+    this.each(function(data, idx, group) {
+      d3.select(this)
+        .style("font-weight", "bold")
+        .attr("fill", improvedChord.colors[group]);
+    });
+  });
+
+  return improvedChord;
+
+};