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-v2/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...