Introduce Fading Bar Chart

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

Hide file tree

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

diff --git a/scripts/app.js b/scripts/app.js
@@ -37,6 +37,14 @@
     myCustomBarChart.draw(dataSrc2);
   }, 1500);
 
+  var dataSrc3 = new DataSrc();
+  var myFadingBarChart = FadingBarChart();
+  myFadingBarChart.draw(dataSrc);
+  setInterval(function() {
+    dataSrc3.fetch();
+    myFadingBarChart.draw(dataSrc);
+  }, 1500);
+
   var myChord = Chord();
   myChord(matrix);
 

diff --git a/scripts/fading-bar-chart.js b/scripts/fading-bar-chart.js
@@ -0,0 +1,20 @@
+window.FadingBarChart = function(options) {
+
+  "use strict";
+  var BarChart = window.BarChart;
+
+  var fadingBarChart = BarChart(options);
+  var fadeOut = function() {
+    var length = 0;
+    // Terrible hack to get the length of the selection
+    this.each(function() { length++; });
+    this.attr("opacity", function(d, i) {
+      return i / length;
+    });
+  };
+
+  fadingBarChart.on("enter", fadeOut);
+  fadingBarChart.on("update:transition", fadeOut);
+
+  return fadingBarChart;
+};