D3 Examples - Remove before add

xxxxxxxxxx
 
<!DOCTYPE html>
 <meta charset="utf-8">
 <link href='https://fonts.googleapis.com/css?family=Lato:300,900' rel='stylesheet' type='text/css'>
 <style>
​
 .cells {
   fill: #aaa;
 }
​
 .label {
   text-anchor: start;
   font: 24px sans-serif;
   float: left;
 }
​
 .label_second {
   text-anchor: start;
   font: 24px sans-serif;
   float: right;
 }
​
  .btn-group {
      margin-left: 30px;
        display: inline;
    }
​
    .button1 {
        display: inline-block;
        color: #666;
        background-color: #f5f5f5;
        text-transform: uppercase;
        font-size: 11px;
        padding: 5px 5px;
        border-radius: 5px;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        border: 1px solid rgba(0,0,0,0.3);
        border-bottom-width: 3px;
        margin-right: 10px;
        margin-bottom: 10px;
        margin-top: 10px;
      }
​
    .button1:hover {
        background-color: #e3e3e3;
        border-color: rgba(0,0,0,0.5);
        cursor: pointer;
    }
​
    .button1:active {
        background-color: #CCC;
        border-color: rgba(0,0,0,0.9);
    }
​
    .button1:focus {
        outline: none;
    }
​
 #drawing {
   margin-top: 0px;
   display: block;
   margin: auto;
 }
​
 #annotes {
   margin-top: 30px;
   margin-bottom: 50px;
   margin-left: 30px;
   width: 960px;
   height: 70px;
   font-size: 12;
   font-family: sans-serif;
   text-align: justify;
   word-break:keep-all;
 }
​
 #header {
   margin-top: 30px;
   margin-bottom: 50px;
   margin-left: 30px;
   font-size: 12;
   font-family: sans-serif;
   text-align: justify;
   word-break:keep-all;
 }
​
#logo {
  float: right;
  margin-top: 0px;
  width: 300px;
  height: 120px;
}
 #logo img{
  width: 100%;
  height: auto;
}
 </style>
 <body>
 <div #container>
​
​
 <div class="btn-group" data-toggle="buttons-radio">
                <button type="button" class="button1" value = 0>0</button>
                <button type="button" class="button1" value = 2>2</button>
 </div>
​
 <div id="drawing"> <svg width="960" height="990"></svg> </div>
​
</div>
 <script src="https://d3js.org/d3.v4.js"></script>
 <script>
​
 var data = [
   {"event" : "asdfadsf",
    "blocks": 2000,
    "denom": "t",
    "first": 2000,
    "second": 800,
    "domain": [800]},
​
    {"event" : "Break",
     "blocks": 0,
     "denom": "t",
     "first":0,
     "second":0,
     "domain": [800]
    },
​
   {"event" : "asdfasdf",
    "blocks": 1000,
    "denom": "m",
    "first": 1000,
    "second": 200,
    "domain": [200]},
​
    {"event" : "Break",
     "denom": "m",
     "blocks": 0,
     "first": 0,
     "second": 0,
     "domain": [200]}
  ];
​
​
 var formatNumber = d3.format(",d");
 var colorScale = d3.scaleThreshold().range(["#70C1B3","#FF1654","#B2DBBF","#F3FFBD","#247BA0"])
 var svg = d3.select("svg");
 var width = +svg.attr("width"),
     height = +svg.attr("height");
 var groupSpacing = 3,
     cellSpacing = 1,
     cellSize = Math.floor((width - 11 * groupSpacing) / 100) - cellSpacing,
     offset = Math.floor((width - 100 * cellSize - 90 * cellSpacing - 11 * groupSpacing) / 2);
 var updateDuration = 125,
     updateDelay = updateDuration / 500;
 var cell = svg.append("g")
     .attr("class", "cells")
     .attr("transform", "translate(" + offset + "," + (offset + 30) + ")");
​
 var label = svg.append("text")
     .attr("class", "label");
​
 var label_second = svg.append("text")
     .attr("class", "label_second");
​
 var annotes = d3.select("#annotes")
   .style("opacity", 1)
​
 function square(d) {
   var n1 = d.blocks
   var annoted = d.event
   var cScale = colorScale.domain(d.domain)
   var n0 = cell.selectAll("rect").size();
​
   cells = cell.selectAll("rect")
       .data(d3.range(n1));
​
  console.log(n0,n1,cells);
​
   cells.exit().transition()
       .delay(function(d, i) { return (n0 - i) * updateDelay})
       .duration(updateDuration)
       .attr("width", 0)
       .remove();
​
   cells.enter().append("rect")
       .attr("width", 0)
       .attr("height", cellSize)
       .attr("x", function(i) {
         var x0 = Math.floor(i / 100) % 10, x1 = Math.floor(i % 10);
         return groupSpacing * x0 + (cellSpacing + cellSize) * (x1 + x0 * 10);
       })
       .attr("y", function(i) {
         var y0 = Math.floor(i / 1000), y1 = Math.floor(i % 100 / 10);
         return groupSpacing * y0 + (cellSpacing + cellSize) * (y1 + y0 * 10);
       })
       .style("fill", function(i){
         return "lightgrey"
       })
       .style("opacity", 0.8)
     .transition()
       .delay(function(d, i) {return (i - n0) * updateDelay;})
       .duration(updateDuration)
       .attr("width", cellSize)
     .transition()
       .delay(function(d, i) {return ((i - n0) * updateDelay) + 2500;})
       .duration(updateDuration)
       .style("fill", function(i){
         return cScale(i)
       });
​
   annotes
       .text(annoted)
       .transition().style("opacity", function() {
         if (d.event == "Break") {
           return 0;
         }
         else {
           return 1;
         };
       })
       .delay(function(d, i) { return (i - n0) * updateDelay; })
       .duration(Math.abs(n1 - n0) * updateDelay + updateDuration / 2)
​
   label
       .attr("x", offset + groupSpacing)
       .attr("y", offset + groupSpacing)
       .attr("dy", ".71em")
       .style("opacity", function() {
         if (d.event == "Break") {
           return 0;
         }
         else {
           return 1;
         };
       })
     .transition()
       .duration(Math.abs(n1 - n0) * updateDelay + updateDuration / 2)
       .ease(d3.easeLinear)
       .tween("text", function() {
         if (d.denom === "t") {
          n0 = n0;
          n1 = n1;
         }
         else if (d.denom === "m") {
          n0 = n0 * 1000;
          n1 = d.first * 1000;
         };
​
         var self = this;
         var i = d3.interpolateNumber(n0, n1);
​
         return function(t) {
           self.textContent = "2018 :" + formatNumber(Math.round(i(t)));
         };
       });
​
     label_second
         .attr("x", offset + groupSpacing + 250)
         .attr("y", offset + groupSpacing)
         .attr("dy", ".71em")
         .style("opacity", function() {
           if (d.event == "Break") {
             return 0;
           }
           else {
             return 1;
           };
         })
       .transition()
         .duration(Math.abs(n1 - n0) * updateDelay + updateDuration / 2)
         .ease(d3.easeLinear)
         .tween("text", function() {
           if (d.denom === "t") {
            n0 = 0;
            n1 = d.second;
           }
           else if (d.denom === "m") {
            n0 = 0;
            n1 = d.second * 1000;
           };
​
           var self = this;
           var i = d3.interpolateNumber(n0, n1);
​
           return function(t) {
             self.textContent = "2017 :" + formatNumber(Math.round(i(t)));
           };
         });
 };  
​
​
 d3.selectAll(".button1").on("click", function animate(){
​
                    option = +this.value;
                    square(data[1]);
    setTimeout(function(){
      square(data[option]);
    }, 2 * (updateDelay * 100 * 100 + updateDuration + 1000))
          
          console.log('b');
                });
​
​
 d3.select(self.frameElement).style("height", height + "px");
 </script>
 </body>
​
​
    