Transitioning Numbers

<!DOCTYPE html>
<meta charset="utf-8">
 <div></div>
 <script src="https://d3js.org/d3.v4.js"></script>
 
 <script>

var svg = d3.select("div")
  .append("svg")
  .attr("width",960)
  .attr("height",500);
 
var colors = [["#e0ecf4","#9ebcda","#8856a7"],["#74c476","#31a354","#006d2c"],["#a63603","#e6550d","#fd8d3c"]];
var data = function() {
  return d3.range(3).map(function(d,i) {
	return {color: colors[i], num: Math.random()*1000 | 0 }
  })
}

var g = svg.selectAll("g")
  .data(data)
  .enter()
  .append("g")
  .attr("transform", function(d,i) {
    return "translate("+[0,(i*160)]+")";
  })
  .each(generator);

setInterval(function(){ 
	svg.selectAll("g")
	.data(data())
    .each(generator);
  }, 3000);

function generator(d) {

var margin = 5;
  var lgSize = 70;
  var mdSize = (lgSize-margin*2)/3;
  var smSize = (mdSize-margin*2)/3;
  var height = lgSize*2+margin;
  
  var n = d.num;
  var color = d.color;
  var lg = Math.floor(n/100);
  var md = Math.floor(n%100/10);
  var sm = n%10;

var g = d3.select(this);

var selection = g.selectAll(".token")
    .data(d3.range(lg+md+sm));
	
  selection.exit()
    .transition()
	.attr("width",0)
	.remove()

selection.enter()
    .append("rect")
	.attr("opacity",1)
	.attr("x", function(d) {
	  // Large squares:
	  if(d < lg) {
	    return Math.floor(d/2)*(lgSize+margin)+lgSize/2; 
	  }
	  // Medium squares:
	  else if(d< lg+md) {
	    var x = Math.floor(lg/2)*(lgSize+margin);
        return x+ Math.floor((d-lg)/3)*(mdSize+margin)+mdSize/2;          
	  }
	  // Small squares
	  else {
		if(md !=9) {
	      var x1 = Math.floor(lg/2)*(lgSize+margin);
		  var x2 = x1 + Math.floor(md/3)*(mdSize+margin);
		  return x2+(d-lg-md)%3*(smSize+margin)+smSize/2;
		}
		else {
		  var offset = lg%2 ? 0 : lgSize+margin;
	      var x = Math.floor((lg+2)/2)*(lgSize+margin);
		  return x-offset+smSize/2;		  
		}
	  }
	})
	.attr("y", function(d) {
	  // Large squares:
	  if(d < lg) {
	    return (d)%2 * (lgSize+margin)+lgSize/2;
	  }
	  // Medium squares:
	  else if(d < md + lg) {
        var y = lg%2 * (lgSize+margin);
        return y + (d-lg)%3 * (mdSize + margin) +mdSize/2    
	  } 
	  // Small Squares:
	  else {
	    if(md !=9) {
	      var y1 = lg%2 * (lgSize+margin);
		  var y2 = y1 + md%3 * (mdSize + margin) 
		  return y2 + Math.floor((d-lg-md)/3)*(smSize+margin)+smSize/2;
		}
		else {
		  var offset = lg%2 ? 0 : lgSize+margin;
		  return Math.floor((d-lg-md))*(smSize+margin)+offset+smSize/2;	  
		}
	  }
	})   
    .attr("width",0)
	.attr("height",0)
	.attr("class","token")
	.merge(selection)
	.transition()
	.duration(1000)
	.attr("x", function(d) {
	  // Large squares:
	  if(d < lg) {
	    return Math.floor(d/2)*(lgSize+margin); 
	  }
	  // Medium squares:
	  else if(d< lg+md) {
	    var x = Math.floor(lg/2)*(lgSize+margin);
        return x+ Math.floor((d-lg)/3)*(mdSize+margin);          
	  }
	  // Small squares
	  else {
		if(md !=9) {
	      var x1 = Math.floor(lg/2)*(lgSize+margin);
		  var x2 = x1 + Math.floor(md/3)*(mdSize+margin);
		  return x2+(d-lg-md)%3*(smSize+margin);
		}
		else {
		  var offset = lg%2 ? 0 : lgSize+margin;
	      var x = Math.floor((lg+2)/2)*(lgSize+margin);
		  return x-offset;		  
		}
	  }
	})
	.attr("y", function(d) {
	  // Large squares:
	  if(d < lg) {
	    return (d)%2 * (lgSize+margin);
	  }
	  // Medium squares:
	  else if(d < md + lg) {
        var y = lg%2 * (lgSize+margin);
        return y + (d-lg)%3 * (mdSize + margin)     
	  } 
	  // Small Squares:
	  else {
	    if(md !=9) {
	      var y1 = lg%2 * (lgSize+margin);
		  var y2 = y1 + md%3 * (mdSize + margin) 
		  return y2 + Math.floor((d-lg-md)/3)*(smSize+margin);
		}
		else {
		  var offset = lg%2 ? 0 : lgSize+margin;
		  return Math.floor((d-lg-md))*(smSize+margin)+offset;	  
		}
	  }
	})   
	.attr("width",function(d) {
	  if(d < lg) return lgSize;
	  if(d < lg+md) return mdSize;
	  return smSize;
	})
	.attr("height",function(d) {
	  if(d < lg) return lgSize;
	  if(d < lg+md) return mdSize;
	  return smSize;	
	})
	.attr("fill", function(d) {
	  if( d < lg) return color[0];
	  if (d < lg+md) return color[1];
	  else return color[2];
	
	})
}
</script>

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