<script src="http://metrocosm.com/js/d3.v3.min.js"></script><!-- [et_pb_line_break_holder] --><script><!-- [et_pb_line_break_holder] -->var svg = d3.select("body").append("svg") //create the SVG panel<!-- [et_pb_line_break_holder] --> .attr("width", 150)<!-- [et_pb_line_break_holder] --> .attr("height", 100);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->var circle = svg.append("circle") //add the circle<!-- [et_pb_line_break_holder] --> .attr("cx", 50)<!-- [et_pb_line_break_holder] --> .attr("cy", 50)<!-- [et_pb_line_break_holder] --> .attr("r",10)<!-- [et_pb_line_break_holder] --> .style("fill","blue");<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->setInterval(function(){ //execute the following code every 3 seconds<!-- [et_pb_line_break_holder] --> circle.transition().duration(500).attr("cx", 100) //animate the circle<!-- [et_pb_line_break_holder] --> .transition().duration(500).delay(500).style("fill","red")<!-- [et_pb_line_break_holder] --> .transition().duration(500).delay(1000).attr("r",20)<!-- [et_pb_line_break_holder] --> .transition().duration(500).delay(1500).attr("cx", 50)<!-- [et_pb_line_break_holder] --> .transition().duration(500).delay(2000).style("fill","blue")<!-- [et_pb_line_break_holder] --> .transition().duration(500).delay(2500).attr("r",10);<!-- [et_pb_line_break_holder] -->}, 3000);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --></script>