Andrew-Reid/index.html

## index.html
<!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>
	<!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>