Reusable pie chart with transition

_.md

Gist #4176157 [ Launch Inlet ]
Gist #3200444

config.json

{"description":"Reusable pie chart with transition","endpoint":"","display":"svg","public":true,"require":[],"tab":"edit","display_percent":0.5902953586497888,"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}

inlet.js

var svg = d3.select("svg")
            .append("g")
            .attr("transform", "translate(" + 420 + "," + 258 + ")");

//var g = svg.append("g")
//           .attr("transform", "translate(" + 400 + "," + 300 + ")");

var data = {counts : [2,1,1,1,1],
            colors : ["green", "yellow", "red", "blue", "cyan"],
            total  : 5
           };

var pChart = pieChart().innerRadius(37).outerRadius(126)
var paths = pChart(svg);
pChart.update(paths, data);

function pieChart() {
  var innerRadius = 22;
  var outerRadius = 94;
  var width       = 1228;
  var height      = 982;
  var data = {counts : [1,1,1,1,1],
              colors : ["green", "yellow", "red", "blue", "cyan"],
              total  : 5
             }
  var pie = d3.layout.pie()
                     .sort(null);
      
  var chart = function(g) {
    var arc = d3.svg.arc()
                    .innerRadius(innerRadius)
                    .outerRadius(outerRadius);
  
    var path = g.selectAll("path").data(pie(data.counts))
                                      .enter().append("path")
                                      .attr("fill", "white")
                                      .attr("d", arc)
        .each(function(d) { console.log(this);this._current = d; }); // store the initial values
  
    path.data(pie(data.counts))
        .attr("fill", function(d,i) {return data.colors[i]});

  //    $(g).bind("monitor", {pie: pie, arc:arc, path:path}, worker);
  //    $(g).trigger("monitor");
    chart.update = function(value) {
	if (!arguments.length) return data;
    console.log("hix")
    data=value;
    var newRadius = value.total;
      console.log(paths);
    //  console.log("THIS: ", this)
    path.transition().duration(1000).attrTween("d", function(a) {
      console.log("T: " + this);
       var i = d3.interpolate(this._current, a),
           k = d3.interpolate(arc.outerRadius()(), newRadius);
       this._current = i(0);
       return function(t) {
           return arc.innerRadius(k(t)/4).outerRadius(k(t))(i(t));
       };
    });
    return chart;
  }

      return path
  }

  chart.innerRadius = function(value) {
   	if (!arguments.length) return innerRadius;
    innerRadius = value;
	return chart; 
  }
    
  chart.outerRadius = function(value) {
    if (!arguments.length) return outerRadius;
    outerRadius = value;
    return chart;
  }
    
  chart.data = function(value) {
    if (!arguments.length) return data;
    data = value;
    return chart;
  }
    
  return chart;
}

    
function worker(event) {
  var pie         = event.data.pie;
  var path        = event.data.path;
  var arc         = event.data.arc;
  var newRadius   = getRandomRadius();
  var jobs_counts = getRandomCounts();

  path.transition().duration(500).attrTween("d", function(a) {
       var i = d3.interpolate(this._current, a),
           k = d3.interpolate(arc.outerRadius()(), newRadius);
       this._current = i(0);
       return function(t) {
           return arc.innerRadius(k(t)/4).outerRadius(k(t))(i(t));
       };
  });                                            
//    setTimeout(function(){$(svg).trigger("monitor")}, 1000)
}                     
            

function getRandomCounts() {
    var arr = [];
    for (var i=0;i<5;i++) {
       arr.push(Math.floor(Math.random()*10)+1);
    }
    console.log(arr);
    return (arr);
}

function getRandomRadius() {
    var newRadius = Math.floor(Math.random()*150);
    if (newRadius < 50) {
          newRadius = 50;
    }
    return newRadius;                                            
}