D3 Examples - circle transitions

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<style>
​
circle {
  fill: #333;
}
​
</style>
<svg width="960" height="500">
  <circle cx="480" cy="250" r="200"/>
</svg>
<script src="//d3js.org/d3.v4.min.js"></script>
<script>
​
setInterval(function() {
  d3.select("circle")
      .style("fill", d3.hcl(Math.random() * 360, 100, 50))
    .transition()
      .duration(1000)
        .delay(1000)
      .style("fill", function() {
        var that = d3.select(this),
            fill0 = that.style("fill"),
            fill1 = that.style("fill", null).style("fill");
        that.style("fill", fill0);
        return fill1;
      })
    .transition()
        .duration(750)
        .attr('cx', 700)
        .attr('cy', 800)
        .attr('r', 200);
  
  d3.select("circle")
    .attr("cx", 480)
    .attr("cy", 250)
    .attr("r", 200)
    .transition()
        .attr("r", 50)
        .duration(2000)
}, 2500);
​
</script>
​
    