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