animated Mondrian

just for a study :-)

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#main {
	border: 1px solid #AAA;
	width: 450px;
	height: 450px;
	margin: 25px auto 0 auto;
}
</style>
<title>animated Mondrian</title>
</head>
<body>
<div id="main"></div>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script>
	
	var margin = {top: 0, right: 0, bottom: 0, left: 0},
        width = 450 - margin.left - margin.right,
        height = 450 - margin.top - margin.bottom;

var svg = d3.select("#main").append("svg")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)
      .append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var colorArray = ["#ab1d00", "#012e7b", "#f9d300", "#FFF"];
    var colorScale = d3.scale.ordinal().range( colorArray );

var interval = 1000;
	var xArray = new Array(),
		yArray = new Array();

var circles = svg.selectAll(".en").data( [0,1,2,3,4,5,6,7,8] );

circles.enter()
			.append("rect")
			.attr("class", "en");

var mainLoop = function() {

makeRandom();

circles.transition()
			.ease("linear")
			.duration(1000).ease("linear")
			.attr("width", function(d,i) {
				switch (i){
				  case 0:
				  	return xArray[0];
				    break;
				  case 1:
				  	return xArray[1];
				    break;
				  case 2:
				  	return width - (xArray[0] + xArray[1]) - 5;
				    break;
				  case 3:
					return xArray[2];
				    break;
				  case 4:
					return xArray[3];
				    break;
				  case 5:
					return width - (xArray[2] + xArray[3]) - 5;
				    break;
				  case 6:
					return xArray[4];
				    break;
				  case 7:
					return xArray[5];
				    break;
				  case 8:
					return width - (xArray[4] + xArray[5]) - 5;
				    break;
				}
			})
			.attr("height", function(d,i) {
				switch (i){
				  case 0:
				  	return yArray[0];
				    break;
				  case 1:
				  	return yArray[0];
				    break;
				  case 2:
				  	return yArray[0];
				    break;
				  case 3:
					return yArray[1];
				    break;
				  case 4:
					return yArray[1];
				    break;
				  case 5:
					return yArray[1];
				    break;
				  case 6:
					return height - (yArray[0] + yArray[1]) - 5;
				    break;
				  case 7:
					return height - (yArray[0] + yArray[1]) - 5;
				    break;
				  case 8:
					return height - (yArray[0] + yArray[1]) - 5;
				    break;
				}
			})
			.attr("x", function(d,i) {
				switch (i){
				  case 0:
				  	return 5;
				    break;
				  case 1:
				  	return xArray[0];
				    break;
				  case 2:
					return xArray[0] + xArray[1];
				    break;
				  case 3:
				  	return 5;
				    break;
				  case 4:
				  	return xArray[2];
				    break;
				  case 5:
				  	return xArray[2] + xArray[3];
				    break;
				  case 6:
				  	return 5;
				    break;
				  case 7:
				  	return xArray[4];
				    break;
				  case 8:
				  	return xArray[4] + xArray[5];
				    break;
				}
			})
			.attr("y", function(d,i) {
				switch (i){
				  case 0:
				  	return 5;
				    break;
				  case 1:
				  	return 5;
				    break;
				  case 2:
				  	return 5;
				    break;
				  case 3:
					return yArray[0]+5;
				    break;
				  case 4:
					return yArray[0]+5;
				    break;
				  case 5:
					return yArray[0]+5;
				    break;
				  case 6:
					return yArray[0] + yArray[1];
				    break;
				  case 7:
					return yArray[0] + yArray[1];
				    break;
				  case 8:
					return yArray[0] + yArray[1];
				    break;
				}
			})
			.attr("opacity", 1.0)
			.attr("stroke", "#000")
			.attr("stroke-width", "10px")
			.style("fill", function(d,i) {
					var _random = Math.floor( Math.random() * 4);
					return colorScale( _random );
			});

return function() {
	        d3.timer( mainLoop(), interval );
	        return true;
	    }
	};

d3.timer( mainLoop(), interval );

</script>
</body>
</html>

Modified http://d3js.org/d3.v3.min.js to a secure url

https://d3js.org/d3.v3.min.js