pie chart

_.md

[ Launch: Tributary inlet ] 5671888 by samselikoff

config.json

{"description":"pie chart","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"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,"thumbnail":"http://i.imgur.com/TEEfWAM.gif"}

inlet.js

var chart = new PieChart()
	.straightenLabels(true)
	.labelSize('31px')
	.labelColor('#FFFFFF')
	.color(['#61C270', '#439CA8', '#EC7575'])
	// .oneColor('#439CA8')
	.labelText('d.data.count');

/*d3.select('#display').append('div').attr('id', 'chart')
	.style('height', '334px')
	.style('width', '400px')
	.style('margin-left', '100px')
	.style('margin-top', '100px');
*/

//d3.select('#chart').data([data]).call(chart);
  var data = [
    {category: 'Done', count: Math.floor(Math.random()*14) },
    {category: 'Remaining Assigned', count: 6},
    {category: 'Remaining Unassigned', count: 4}
	];

d3.select('svg').data([data]).call(chart);

/*setInterval(function() {
  var data = [
    {category: 'Done', count: Math.floor(Math.random()*14) },
    {category: 'Remaining Assigned', count: 6},
    {category: 'Remaining Unassigned', count: 4}
	];
  
  d3.select('#chart').data([data]).call(chart);
}, 1500);*/

function PieChart() {

  var margin      = {top: 20, right: 20, bottom: 20, left: 20},
      beginDate   = '',
      endDate     = '',
      color       = d3.scale.category10(),
      oneColor    = '',
      labelSize   = '',
      labelColor  = '',
      labelText   = '',
      legend      = true,
      straightenLabels = false;

  function chart(selection) {
    selection.each(function(data)
    {
      var width = $(selection[0]).width()-margin.left-margin.right;
      var height = $(selection[0]).height()-margin.top-margin.bottom;

      
      radius = (Math.min(width, height) / 2 );
      arc    = d3.svg.arc().outerRadius(radius).innerRadius(radius / 2);

      data.forEach(function(d) {
        d.count = +d.count;
      });

      var pie = d3.layout.pie()
        .sort(null)
        .value(function(d) { return d.count; });

      if (oneColor) {
        var newColors = [];
        for (var i = 0; i < data.length; i++) {
          var percent = 20*i;
          newColors.push(shadeColor(oneColor, percent));
        }
        color.range(newColors);
      }

      // Select the svg element, if it exists.
      var svg = d3.select(this).selectAll("svg").data([pie(data)]);

      // Otherwise, create the skeletal chart.
      var gEnter = svg.enter().append("svg").append("g");
      for (var i = data.length - 1; i >= 0; i--) {
        var piece = gEnter.append("g").attr("class", "arc");
        piece.append("path").style("opacity", 0);
        piece.append("g").attr("class", "label").append("text").style("opacity", 0);
      }
      gEnter.selectAll("path")
        .data(function(d) {return d;})
        .style("fill", function(d) { return color(d.data.category); })
        .each(function(d) { this._current = d; });
      gEnter.selectAll(".label")
        .data(function(d) {return d;})
        .attr("transform", function(d) { return "rotate(" + angle(d) + "," + arc.centroid(d) + ")translate(" + arc.centroid(d) + ")"; });

      // Update the outer dimensions.
      svg.attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom);

      // Update the inner dimensions.
      var g = svg.select("g")
        .attr("transform", "translate(" + ( ( width / 2 ) + margin.left ) + "," + ( ( height / 2 ) + margin.top )+ ")");

      // Update the arcs.
      g.selectAll("path")
        .data(function(d) {return d;})
        .transition()
        .duration(500)
        .style("opacity", 1)
        .attrTween("d", arcTween);

      // Update the labels.
      g.selectAll(".label")
        .data(function(d) {return d;})
        .transition()
        .duration(500)
        .attr("transform", function(d) {return "rotate(" + angle(d) + "," + arc.centroid(d) + ")translate(" + arc.centroid(d) + ")";})
        .select("text")
        .style("opacity", 1)
        .attr("dy", ".35em")
        .style("text-anchor", "middle")
        .text(function(d) { 
          console.log(d.data.count);
          if (d.data.count === 0) {return '';}
          return (labelText)
            ? eval(labelText)
            : d.data.category; 
        });

      if (straightenLabels) {
        g.selectAll(".label")
          .data(function(d) {return d;})
          .select("text")
          .attr("transform", function(d) {return "rotate(" + (-1 * angle(d)) + ")";
        })
      }
      
      if (legend) {
        
      }

      if (labelSize) {g.selectAll("text").style("font-size", labelSize);}
      if (labelColor) {g.selectAll("text").attr("fill", labelColor);}


    });
  }

  function angle(d) {
    var a = (d.startAngle + d.endAngle) * 90 / Math.PI - 90;
    return a > 90 ? a - 180 : a;
  }

  function arcTween(a) {
    var i = d3.interpolate(this._current, a);
    this._current = i(0);
    return function(t) {
      return arc(i(t));
    };
  }

  chart.height = function(_) {
    if (!arguments.length) return height;
    height = _;
    return chart;
  };

  chart.beginDate = function(_) {
    if (!arguments.length) return beginDate;
    beginDate = _;
    return chart;
  };

  chart.endDate = function(_) {
    if (!arguments.length) return endDate;
    endDate = _;
    return chart;
  };
  
  chart.color = function(_) {
    if (!arguments.length) return color;
    color.range(_);
    return chart;
  };

  chart.oneColor = function(_) {
      if (!arguments.length) return oneColor;
      oneColor = _;
      return chart;
  };

  chart.labelSize = function(_) {
      if (!arguments.length) return labelSize;
      labelSize = _;
      return chart;
  };

  chart.labelColor = function(_) {
      if (!arguments.length) return labelColor;
      labelColor = _;
      return chart;
  };
  
  chart.labelText = function(_) {
      if (!arguments.length) return labelText;
      labelText = _;
      return chart;
  };

  chart.straightenLabels = function(_) {
      if (!arguments.length) return straightenLabels;
      straightenLabels = _;
      return chart;
  };

  function shadeColor(color, percent) {
      var R = parseInt(color.substring(1,3),16)
      var G = parseInt(color.substring(3,5),16)
      var B = parseInt(color.substring(5,7),16);

      R = parseInt(R * (100 + percent) / 100);
      G = parseInt(G * (100 + percent) / 100);
      B = parseInt(B * (100 + percent) / 100);

      R = (R<255)?R:255;  
      G = (G<255)?G:255;  
      B = (B<255)?B:255;  

      var RR = ((R.toString(16).length==1)?"0"+R.toString(16):R.toString(16));
      var GG = ((G.toString(16).length==1)?"0"+G.toString(16):G.toString(16));
      var BB = ((B.toString(16).length==1)?"0"+B.toString(16):B.toString(16));

      return "#"+RR+GG+BB;
  }

  return chart;
}