Transitions1

<!DOCTYPE html>
<meta charset="utf-8">
<html>
  <head>
    <title>Transitions</title>
	
   <script src="https://d3js.org/d3.v3.min.js"></script>

</head>
<body>
 <script type="text/javascript">
 
 var circleData = [
 {"cx":"25", "cy":"25", "r":"5"},
 {"cx":"50", "cy":"50", "r":"5"},
 {"cx":"75", "cy":"75", "r":"5"},
 ];
 
 d3.select("body").append("svg");
 
 d3.select("svg")
 .selectAll("circle")
 .data(circleData)
 .enter()
 .append("circle");
 
 d3.selectAll("circle")
 .attr(("cx"),function(d,i){return (i*25)+25;})
 .attr(("cy"),function(d,i){return (i*25)+25;})
 .attr(("r"),function(d,i){return 5});
 
 function crazyFunction (d,i){
 	 d3.select(this)
	 .transition().attr("r","25").attr("fill","yellow")
	 .transition().attr("r","5").attr("fill","black")
	 .transition().attr("cx","100")
	 .transition().attr("cy","100")
	 .transition()
	 .attr("cx",function(d,i){return d.cx})
	  .attr("cy",function(d,i){return d.cx})
	   .attr("fill","blue")
	   .transition()
	   .attr("stroke-width", "2")
	   .attr("stroke", "red")
 };
 //call function
 d3.selectAll("circle").on("mouseover", crazyFunction);
 
 
 </script>
</body>
</html>

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

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