Yesterday, I was asked to add a highlight click event to a point on a screen. For a quick demo of this effect, click the point below.

Fortunately, D3 makes this really easy with transitions.

d3.select(".circle").on("click", onCircleClick);

function onCircleClick() {
    d3.select(d3.event.target)
        .raise()
        .transition()
        .duration(100)
        .attr("r", maxRadius)
        .transition()
        .duration(900)
        .attr("r", radius);
}

The code for this blog post is available in Github.