Permalink
Browse files

Introduce Fading Bar Chart

This chart extends the basic `BarChart` by simply wrapping it and
altering its behavior through the exposed API.
  • Loading branch information...
jugglinmike committed Mar 3, 2013
1 parent e92bfab commit f6994da687c05bc54ac38f1ecc6e59dfe1c1bcbf
Showing with 29 additions and 0 deletions.
  1. +1 −0 index.html
  2. +8 −0 scripts/app.js
  3. +20 −0 scripts/fading-bar-chart.js
View
@@ -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>
View
@@ -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);
@@ -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;
};

0 comments on commit f6994da

Please sign in to comment.