The D3 JavaScript library has a very simple mechanism for transitions and animations. Like all good blog posts, let’s start with an example. First, let’s add an svg – scalable vector graphic – object to our DOM.

<svg id="canvas" width="400" height="200" style="background-color:lightgray;"></svg>

Next, let’s add a circle to this canvas. That’s done with the circle tag.

var svg = d3.select("#canvas");
var circle = svg.append("circle")
    .attr("cx", 50)
    .attr("cy", 100)
    .attr("r", 25)
    .attr("fill", "steelblue");

To make a transition happen, we just change the attribute we want to change. Let’s add a click event listener. When the user clicks on the circle, move the circle.

var diff = 300;
circle.on("click", function () {
    // Capture the current center of the circle. By default, all attributes are
    // returned as strings, so the leading + will ensure that our value gets
    // converted into a number.
    var cx = +circle.attr("cx");
    cx += diff;
    circle.transition()
        .attr("cx", cx);
    diff = -1 * diff;
});

To demonstrate the transition, click on the circle above.

From here, we can modify our transition properties. For our example, let’s make the transition take 3 seconds and use linear easing.

circle.on("click", function () {
    var tr = d3.transition()
        .duration(3000)
        .ease(d3.easeLinear);
    var cx = +circle.attr("cx");
    cx += diff;
    circle.transition(tr)
        .attr("cx", cx);
    diff = -1 * diff;
});

And that’s it! That’s the basics of transitions in D3. Yes, you can make things much more complicated, but everything is a variation of this. You wait for some event – a user interaction (like a click), a data change, whatever – and you change the attributes of a graphical element. You can change locations, sizes, colors, opacity (transparency), or any other value you can imagine.