Card Shuffler

<!DOCTYPE html>
<meta charset="utf-8">
  <head>
   
<style>

text {
	font-family:"Impact";
	font-size:30px;
	fill:white;
	stroke:black;
}
</style>

var margin = {top:50,left:50,bottom:50,right:50},
	width = 960 - margin.left - margin.right,
	height = 500 - margin.top - margin.bottom;

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

var cardWidth = 200,
	cardHeight = 75;

var duration = 1000;

var cards = svg.append("g")
	.attr("transform","translate(" + (width/2 - cardWidth/2) + "," + (height/2 - cardHeight/2) + ")");

var bottomCard = cards.append("g")
	.attr("class","card bottom");

var topCard = cards.append("g")
	.attr("class","card top");

bottomCard.append("rect")
	.attr("width", cardWidth)
	.attr("height", cardHeight)
	.style("fill","#d9534f")
	.style("stroke","black")

bottomCard.append("text")
	.attr("dx", cardWidth/2)
	.attr("dy", cardHeight/2 + 12)
	.attr("text-anchor","middle")
	//.attr("alignment-baseline","middle")
	.text("Bottom")

topCard.append("rect")
	.attr("width", cardWidth)
	.attr("height", cardHeight)
	.style("fill","#5cb85c")
	.style("stroke","black")

topCard.append("text")
	.attr("dx", cardWidth/2)
	.attr("dy", cardHeight/2 + 12)
	.attr("text-anchor","middle")
	//.attr("alignment-baseline","middle")
	.text("Top")

topCard.transition()
	.duration(duration)
	.attr("transform","translate(0," + cardHeight + ")")
	.on("end", tick)

function tick() {

var color = topCard.select("rect").style("fill");
		var text = topCard.select("text").text()

topCard.attr("transform","translate(0,0)")
			.select("rect")
			.style("fill", bottomCard.select("rect").style("fill"));

topCard.select("text")
			.text(bottomCard.select("text").text());

bottomCard.attr("transform","translate(0," + cardHeight + ")")
			.select("rect")
			.style("fill",color);

bottomCard.select("text")
			.text(text);

bottomCard.transition()
			.duration(duration)
			.attr("transform","translate(0,0)")
			.on("end", function() {
				topCard.transition()
					.duration(duration)
					.attr("transform","translate(0," + cardHeight + ")")
					.on("end", tick)
			})
}

</script>

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

https://d3js.org/d3-scale-chromatic.v1.min.js