From f6994da687c05bc54ac38f1ecc6e59dfe1c1bcbf Mon Sep 17 00:00:00 2001
From: Mike Pennisi <mike@mikepennisi.com>
Date: Sat, 2 Mar 2013 21:01:36 -0500
Subject: [PATCH] Introduce Fading Bar Chart

This chart extends the basic `BarChart` by simply wrapping it and
altering its behavior through the exposed API.
---
 index.html                  |  1 +
 scripts/app.js              |  8 ++++++++
 scripts/fading-bar-chart.js | 20 ++++++++++++++++++++
 3 files changed, 29 insertions(+)
 create mode 100644 scripts/fading-bar-chart.js

diff --git a/index.html b/index.html
index c99df1c..2888b17 100644
--- 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
index b66daa6..93956ac 100644
--- 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
new file mode 100644
index 0000000..7ac3e5c
--- /dev/null
+++ 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;
+};