Horizontal stacked bar with update

_.md

Gist #4270743

config.json

{"description":"Horizontal stacked bar with update","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"gistfile1.txt":{"default":true,"vim":false,"emacs":false,"fontSize":12},"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"tab":"edit","display_percent":0.5011165387299372,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"period","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"hidepanel":false}

inlet.js

var g = d3.select("svg")
          .append("g")

var data1 = {counts : [2,6,7,2,1],
             colors : ["green", "yellow", "red", "blue", "cyan"],
             total  : 18,
             logic_name : "analysis1"
           };
 
var data2 = {counts : [1,1,1,10,2],
             colors : ["green", "yellow", "red", "blue", "cyan"],
             total  : 15,
             logic_name : "analysis2"
            };

var max_counts = 20;

var bChart = hStackedBarChart();
//console.log("bChart: " + bChart);
var k = bChart(g);
console.log(k);


// The reusable horizontal stacked bar
function hStackedBarChart() {
  var barsmargin = 80;
  var countmargin = 80;
  // TODO: Get rid of m and n or data in initialization
  var stack = d3.layout.stack();
  var margin = {top: 10, right: 10, bottom: 10, left: 10},
      width = 460 - margin.left - margin.right,
      height = 50;
//      height = 200 - margin.top - margin.bottom;
  var fontsize = 16;
  var x = d3.scale.ordinal()
      .domain(d3.range(max_counts))
      .rangeRoundBands([0, height], .08);
  console.log("RR: " + x.rangeBand());
  var default_data = {total : 4,
                      counts : [1,1,1,1],
                      colors : ["green", "blue", "red", "cyan"],
                      logic_name : "analysis1"
                     };
  
  var data = transformData(default_data);
  console.log("DATA:");
  console.log(data);
  var layers = stack(data);
  console.log("LAYERS:");
  console.log(layers);
  var bChart = function(g){
    // Only 1 layer
    console.log(g)
    var gLayer = g.selectAll(".layer")
                  .data(layers)
                  .enter().append("svg:g")
                  .attr("class", "layer")
                  .style("fill", function(d, i) { return default_data.colors[i] })
        console.log(gLayer);
    
    var gRects = gLayer.selectAll("g")
                       .data(function(d) {return d})
                       .enter().append("g")
                       .attr("class", function(d,i){return "analysis" + (i+1)})
                       .classed("bar", true)

    gRects.append("svg:rect")
          .attr("x", barsmargin)
          .attr("y", function(d) {console.log(d); return x(d.x)})
          .attr("height", height)
          .attr("width", 20)
          .each(function(d,i){this._type = "stacked"});
    

    
	return gRects;
  }
  return bChart;
}

function live_overview(svg, layers) {
//    y.domain([0, yStackMax]);
    y = new_scale(svg, layers);

    var layer = svg.selectAll(".layer")
                   .data(layers);
    var rect = layer.selectAll("rect")
        .data(function(d) {return d})
//            console.log(rect);
    var text = layer.selectAll("text")
        .data(function(d) {return d})
//            console.log(text);
   layer.selectAll(".bar").call(redrawBars, 1000, 300)

  svg.selectAll(".counts_label")
       .data(layers)
       .transition()
        .delay(function(d,i){return i*300})
       .duration(1000)
       .attr("x", function(d,i){var l=layers.slice(-1)[0][i]; return(y(l.y0+l.y) + barsmargin + 10)})
       .text(function(d,i){var l=layers.slice(-1)[0][i]; return (l.y0 + l.y)})
}

function transformData(data) {
    var transfData = [];
    for (var i=0; i<data.counts.length; i++) {
       transfData[i] = [];   
    }
//    for (var i=0; i<data.counts.length; i++) {
        for (var j=0; j<data.counts.length; j++) {
            transfData[j].push({x:0, y:data.counts[j]})
        }
//    }
  console.log("transf: ")
  console.log(transfData);
    return transfData;
}

function new_scale(svg, layers) {
    var yStackMax = d3.max(layers, function(layer) { return d3.max(layer, function(d) { return d.y0 + d.y; }); });
//    console.log("MAXY: " + yStackMax);    
    var width = d3.select("svg").attr("width");
    
    var y = d3.scale.linear()
          .domain([0, yStackMax])
          .range([0,width-barsmargin-countmargin]);

    return y;
}


function transformData2(data) {
  var transfData = [];
  transfData[0] = []
  for (var i=0; i<data.counts.length; i++) {
    transfData[0].push({x:0, y:data.counts[i]})
  }
  console.log("transf_data:")
  console.log(transfData);
  return transfData;
}

function redrawBars(bar, time, delay) {
    var rect = bar.selectAll("rect")
    rect
        .transition()
        .delay(function(d,i) {return i*delay})
        .duration(time)
            .attr("x",function(d) {if (this._type == "stacked") {return barsmargin+y(d.y0)} else {return barsmargin}})
            .attr("y",function(d,i) {if (this._type == "stacked") {return x(d.x)} else {return (x(d.x)+this._column*x.rangeBand()/4)}})
            .attr("width", function(d) {return y(d.y)})
            .attr("height", function() {if (this._type == "stacked") {return x.rangeBand()} else {return x.rangeBand()/4}})

    var counts_labels = bar.selectAll("text")
    counts_labels
        .transition()
        .delay(function(d,i) {return i*delay})
        .duration(time)
            .attr("x", function(d) {if (this._type == "stacked") {return barsmargin+y(d.y0+d.y)} else {return barsmargin+y(d.y)}})
            .attr("y", function(d,i) {if (this._type == "stacked") {return x(d.x)} else {return (x(d.x)+this._column*x.rangeBand()/4+x.rangeBand()/8+5)}}) // the last 5 is because fontsize is 10
            .text(function(d){return (d.y)})
}