Using tweening

Tween comes from the word inbetween, which is a common practice performed in the traditional animation where after key frames were created by the master animator, less experienced animators were used to generate frames in between the key frames. This phrase is borrowed in modern computer-generated animation and refers to the technique or algorithm that controls how the inbetween frames are generated. In this recipe, we will examine how the D3 transition supports tweening.

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/tweening.html

How to do it...

In the following code example, we will create a custom tweening function to animate a button label through nine discrete integral numbers:

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