Using d3.chart to make composable charts

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.js"></script>
<script src="https://bocoup.com/js/reusability-with-d3-blog-post/chord-diagram.js"></script>
<script src="https://bocoup.com/js/reusability-with-d3-blog-post/fading-bar-chart.js"></script>
<script src="https://bocoup.com/js/reusability-with-d3-blog-post/improved-chord-diagram.js"></script>
<button>Animate Bars</button>

CSS

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

JavaScript

d3.chart("Hybrid", {

  initialize: function(options) {
    var radius = 200;
    var barHeight = radius / 3;
    var barWidth = radius * 2;

    var chord = this.chord = this.mixin("ImprovedChord", this.base.append("g"), options);
    var bc = this.bc = this.mixin("FadingBarChart", this.base.append("g"), options);
    chord.transform = function(data) {
      return d3.chart("Chord").prototype.transform(data.series2);
    };
    bc.transform = function(data) {
      return d3.chart("BarChart").prototype.transform.call(bc, data.series1);
    };

    this.base.attr("width", chord.base.attr("width"));
    this.base.attr("height", chord.base.attr("height"));

    chord.setRadius(radius);
    bc.width(barWidth);
    bc.height(barHeight);
    bc.base.attr("transform",
      "translate(" +
        (this.base.attr("width")/2) +
        "," +
        (this.base.attr("height")/2 + radius - barHeight) +
      ")");
    bc.layer("bars").on("exit:transition", function() {
      this.attr("x", null);
      this.attr("width", 0);
    });
    bc.layer("bars").on("merge:transition", function() {
      var length = 0;
      this.attr("x", function() { length++; });
      this.attr("x", null);
      this.attr("transform", function(d, i) {
        return "rotate(" + (-360*i/length) + ",0," + (barHeight-radius) + ")";
      });
    });
  }

});

// From http://mkweb.bcgsc.ca/circos/guide/tables/
var matrix = [
  [11975,  5871, 8916, 2868],
  [ 1951, 10048, 2060, 6171],
  [ 8010, 16145, 8090, 8045],
  [ 1013,   990,  940, 6907]
];

var dataSrc4 = new DataSrc();
var hybrid = d3.select("body")
  .append("svg").chart("Hybrid", { width: 500 });

hybrid.draw({
  series1: dataSrc4,
  series2: matrix
});

d3.select("button").on("click", function() {
  setInterval(function() {
    dataSrc4.fetch();
    hybrid.draw({
      series1: dataSrc4,
      series2: matrix
    });
  }, 1500);
});