Animated isometric view with D3js

How to use the Isometric Blocks example with D3js to animate the blocks.

The original tutorial: A tutorial on how to render isometric blocks in the correct order

Using D3js and canvas: Working with D3.js and Canvas: When and How

forked from rveciana's block: Animated isometric view with D3js

<!doctype html>
<html>
<head>
	<meta charset="utf8">
	<style>
		canvas {
			background-color: #f5f5f5;
			margin-right: 5px;
			text-align: center;
			}
     </style>

var canvas = d3.select("#figure1b");
			var context = canvas.node().getContext("2d");
			
			var detachedContainer = document.createElement("custom");
			var dataContainer = d3.select(detachedContainer);
			var t = d3.timer(function(elapsed) {
				if (elapsed > 1000) t.stop();
				drawCanvas();
				});

function drawCustom(data) {
								
				var dataBinding = dataContainer.selectAll("custom.rect")
					.data(data, function(d) { return d; });
				
				dataBinding
					.attr("z", 0)
					.transition()
					.duration(1000)
					.attr("z", 10);

dataBinding.enter()
					.append("custom")
					.attr("class","rect")
					.attr("x",  function(d){return d.x})
					.attr("y",  function(d){return d.dy})
					.attr("z",  function(d){return d.z})
					.attr("dx",  function(d){return d.dx})
					.attr("dy",  function(d){return d.dy})
					.attr("color", function(d){return d.color})
					.attr("dz", 0)
					.transition()
					.duration(1000)
					.attr("dz", function(d){return d.dz});
				
				dataBinding.exit()
					.attr("size", 8)
					.transition()
					.duration(1000)
					.attr("size", 5)
					.attr("fillStyle", "lightgrey");
				}

</body>
</html>

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