old broken pie

by mamounothman

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>


<script>
  var arcGenerator = {
    radius: 190,
    oldData: "",
    init: function(data) {
      var clone = jQuery.extend(true, {}, data);

      var preparedData = this.setData(clone);
      this.oldData = preparedData;
      this.setup(preparedData);
    },
    update: function(data) {
      var clone = jQuery.extend(true, {}, data);

      var preparedData = this.setData(clone);

      this.animate(preparedData);
      this.oldData = preparedData;
    },
    animate: function(data) {
      var that = this;

      var chart = d3.select(".arcchart");

      var pointers = d3.select(".pointers");
      var labels = d3.select(".labels");

      this.addLabels(labels, pointers, data);
      that.generateArcs(chart, data);
    },
    setData: function(data) {

      var diameter = 2 * Math.PI * this.radius;

      var localData = new Array();

      var oldEndAngle = 0;

      var segmentValueSum = 0;
      $.each(data[0].segments, function(ri, va) {
        segmentValueSum += va.value;
      });


      $.each(data[0].segments, function(ri, value) {

        var startAngle = oldEndAngle;
        var endAngle = startAngle + (value.value / segmentValueSum) * 2 * Math.PI;

        data[0].segments[ri]["startAngle"] = startAngle;
        data[0].segments[ri]["endAngle"] = endAngle;
        data[0].segments[ri]["index"] = ri;

        oldEndAngle = endAngle;
      });

      localData.push(data[0].segments);

      return localData[0];
    },
    generateArcs: function(chart, data) {

      var that = this;

      //append previous value to it.			
      $.each(data, function(index, value) {
        if (that.oldData[index] != undefined) {
          data[index]["previousEndAngle"] = that.oldData[index].endAngle;
        } else {
          data[index]["previousEndAngle"] = 0;
        }
      });

      var...