Translate and Rotate 1

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Translate and Rotate</title>
	<script src="https://d3js.org/d3.v3.min.js"></script>
	<link rel="stylesheet" type="text/css" href="translate_and_rotate.css">
</head>
<body>
<div id="legend">
<p>
	Click on the background to activate
</p>
<p>
	Duration:  <input class="box" type="text"
		id="ms" value="3.0" />  seconds.
</p>
</div>

var text_entered = document.getElementById('ms').value * 1000;
	text_entered ? t = text_entered : t = 3.0;

var d = 500, e = "linear"
	d3.select("#g1")
		 .attr("transform", "translate(100 200)")
		 .transition()
			.delay(d)
			.duration(t)
			.ease(e)
			.attr("transform", "translate(850 200)");
	d3.select("#shape")
		.attr("transform", "rotate(0)")
		.transition()
			.delay(d)
			.duration(t)
			.ease(e)
			.attr("transform", "rotate(180)");
	return;
}
d3.select("#background")
	.on("click", function() { return roll(); } );
roll();
</script>

</body>
</html>

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

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