Using tweening

Tween comes from the word "inbetween", which is a common practice performed in 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 it refers to the technique or algorithm controlling 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/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("class", "countdown...