Area Transition

<!doctype html>
<html>
  <head>    
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />     
    <title>resizable-total-pending</title>    
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>      
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/d3@1.29.5/d3.js"></script>
    <style type="text/css"> 
    .area-total { fill: orange; } 
    .line-total { 
       fill: none;
       stroke: darkorange;
       stroke-width: 1.5px;
     }
    </style>                      
    
    <script type="text/javascript">
    $(document).ready(function() {
      $(window).resize(function() { $('.resizable').resize(); })
    });
    </script>                       
    
  </head>
<body>
            
  <button onclick="$('#chart').trigger('change-scale', [ 0 ])">360</button> 
  <button onclick="$('#chart').trigger('change-scale', [ 180 ])">180</button>
  <button onclick="$('#chart').trigger('change-scale', [ 270 ])">90</button>
  <button onclick="$('#chart').trigger('change-scale', [ 330 ])">30</button>

(function(ce) {
                 
      var data = [ ];
      var start = 0;
      
      var minihistory = historydata.history.values.map(function(d) { return { d: d.date, x: d.value.total, y: d.value.pending }; }).reverse();
      data = minihistory;
        
      draw(true);

function draw(flush) {
      
      var fdata = data.filter(function(d, i) { return i >= start; });

w = $(ce).width();
      h = $(ce).height();
      x = d3.scale.linear().domain([d3.min(fdata, function(d) { return d.d; }), d3.max(fdata, function(d) { return d.d; })]).range([0, w]);
      y = d3.scale.linear().domain([0, d3.max(fdata, function(d) { return Math.max(d.x, d.y); })]).range([h, 0]);

var vis; 
      if(flush) {
        d3.select(ce).selectAll('*').remove();
        vis = d3.select(ce)
          .append('svg:svg')
            .attr('width', w)
            .attr('height', h)
          .append('svg:g');
      } else {
        vis = d3.select(ce).select('svg').select('g');
      }

// area

var areaTotalSvg = d3.svg.area()
          .x(function(d) { return x(d.d); })
          .y0(h)
          .y1(function(d) { return y(d.x); });

var areaTotal = vis.selectAll('.area-total').data([1]);
      areaTotal.enter().append('svg:path')
        .data([data])
          .attr('class', 'area-total')
          .attr('d', areaTotalSvg);

var lineTotalSvg = d3.svg.line()
          .x(function(d) { return x(d.d); })
          .y(function(d) { return y(d.x); });
      
      var lineTotal = vis.selectAll('.line-total').data([1]);
      lineTotal.enter().append('svg:path')
        .data([data])
          .attr('class', 'line-total')
          .attr('d', lineTotalSvg);

if (!flush) {       
        areaTotal.data([data]).transition().attr('d', areaTotalSvg); 
        lineTotal.data([data]).transition().attr('d', lineTotalSvg);         
      }

// line rules
        
      var lineRuleAttributes = function(selection) {
        selection
          .attr('x1', 0)
          .attr('x2', w)
          .attr('y1', y)
          .attr('y2', y);
      };
      
      var lineRule = vis.selectAll('line.rule')
        .data(y.ticks(4))
        .call(lineRuleAttributes);

lineRule.enter().append('svg:line')
        .attr('class', 'rule')
        .call(lineRuleAttributes)
        .attr('stroke', 'lightgray');               
      lineRule.exit()
        .remove();

// text rules

var textRuleAttributes = function(selection) {
        selection
          .attr('x', 0)
          .attr('y', y)
          .text(function(d) { return d; });
      }
        
      var textRule = vis.selectAll('text.rule')
        .data(y.ticks(4))
        .call(textRuleAttributes);      
      textRule.enter().append('svg:text')
        .attr('class', 'rule')
        .call(textRuleAttributes);                               
      textRule.exit()
        .remove();

// x axis

vis.selectAll('line.xaxis')
          .data([1])
        .enter().append('svg:line')
          .attr('x1', 0)
          .attr('x2', w)
          .attr('y1', y(0))
          .attr('y2', y(0))
          .attr('stroke', 'black') 
          .attr('stroke-width', 3);

}

$(ce).resize(function() { draw(true); });  
    
    $(ce).bind('change-scale', function(event, s) {    
      start = s;  
      draw(false);
    });

})('#chart');
     
  </script>
</body>

Modified http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js to a secure url

Modified http://mbostock.github.com/d3/d3.js?1.24.0 to a secure url

https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js

https://mbostock.github.com/d3/d3.js?1.24.0