Pulsating Circle

...much to study here...

HTML

<h3>At the end of the transition, it initialises a new one with reversed values.</h3>

JavaScript

var width = 500,
height = 500,
minRadius = 50,
    maxRadius = 500;

var duration = 1000;

d3.select("body").append("input")
    .attr("type", "range")
    .attr("min", 500)
    .attr("max", 2000)
    .attr("value", duration)
    .on("change", function() { duration = this.value; });

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);
    
svg.append("circle")
    .attr("cx", width/2)
    .attr("cy", height/2)
    .attr("r", minRadius)
    // check this: you can call a function and pass the element as the contect
    // we do this with .on(...) but can also do this way...this is powerful
    // also, for study, you are calling a function and passing parameters in a format that
    // I am not familiar with...study this!!!
    .call(transition, minRadius, maxRadius); 

function transition(element, start, end) {
    element.transition()
        .duration(duration)
        .attr("r", end)
        // transitions can add listeners to the start and end states!!!
        .each("end", function() { d3.select(this).call(transition, end, start); });
}