Data Visualization with D3 4.x Cookbook - Second Edition

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