D3.layer example

Demonstrating how a simple framework on top of d3.js can significantly improve chart configurability.

by jugglinmike

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.1.9/d3.min.js"></script>
<script src="https://static.bocoup.com/blog/d3.chart-0.1.0.min.js"></script>
<script src="https://bocoup.com/js/reusability-with-d3-blog-post/datasrc.js"></script>
<script src="https://bocoup.com/js/reusability-with-d3-blog-post/bar-chart-vanilla.js"></script>
<button>Animate Bars</button>

CSS

.chart rect {
  fill: steelblue;
  stroke: white;
}
button {
  display: block;
  margin: 0 auto;
}

JavaScript

var dataSrc2 = new DataSrc();
var myCustomBarChart = BarChart();
var fadeOut = function() {
  this.attr("opacity", function(d, i) {
    return i / dataSrc2.data.length;
  });
};
myCustomBarChart.on("enter", fadeOut);
myCustomBarChart.on("update:transition", fadeOut);
myCustomBarChart.draw(dataSrc2);

d3.select("button").on("click", function() {
  setInterval(function() {
    dataSrc2.fetch();
    myCustomBarChart.draw(dataSrc2);
  }, 1500);
});