Animating a single element

In this recipe, we will first take a look at the simplest case of transition—interpolating attributes on a single element over time to produce a simple animation.

Getting Ready

Open your local copy of the following file in your web browser:

https://github.com/NickQiZhu/d3-cookbook/blob/master/src/chapter6/single-element-transition.html

How to do it...

The code necessary to perform this simple transition is extremely short; good news for any animator:

<script type="text/javascript">
    var body = d3.select("body"), 
        duration = 5000;

    body.append("div") // <-A
            .classed("box", true)
            .style("background-color", "#e9967a") // <-B
        .transition() // <-C
        .duration(duration) // <-D
            .style("background-color", "#add8e6") // <-E
            .style("margin-left", "600px") // <-F
            .style("width", "100px")
            .style("height", "100px");
</script> 

This code produces a moving...