Translate and Rotate 2

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="https://d3js.org/d3.v3.min.js"></script >
</head>
<body>
<h4 style="position:absolute; left:50px; top:10px; font:12pt sans-serif; color:navy;">
    Click the background to reanimate
</h4>
<h4 style="position:absolute; left:50px; top:10px; font:12pt sans-serif; color:navy;">
    Click the background to reanimate
</h4>
<svg width="960" height="500">
    <defs>
        <g id="shape" transform="rotate(0)">
            <path d=
"M -40 -90
c -20 33 20 66 0 100 
a 60 60 0 0 0 100 0
q 30 -30 0 -100 z"
                fill="#bce" opacity="0.8" stroke="magenta" />
            <circle r="2" fill="none" stroke="magenta" />
        </g>
    </defs>
  <rect id="background" width="960" height="500" fill="aliceblue" />    
    <path d="M 50 200 h 850" stroke="magenta" />
    <g id="g0">
        <g id="g1">
            <use xlink:href="#shape" />
       </g>
    </g>
</svg>
 
<script type="text/javascript">
var roll = function() {
	var t = 4000, 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