Remove before add

forked from pybern's block: Remove before add

<!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>
 <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>

https://d3js.org/d3.v4.js