Working with timer

So far in this chapter we have discussed various topics on D3 transition. At this point you might be asking the question, What is powering D3 transition that is generating the animated frames?

In this recipe, we will explore a low-level D3 timer function that you can leverage to create your own custom animation from scratch.

Getting Ready

Open your local copy of the following file in your web browser:

https://github.com/NickQiZhu/d3-cookbook/blob/master/src/chapter6/timer.html

How to do it...

In this recipe, we will create a custom animation that does not rely on D3 transition or interpolation at all; essentially a custom animation created from scratch. Let's look at the following code:

<script type="text/javascript">
    var body = d3.select("body");
            
    var countdown = body.append("div").append("input");
    
    countdown.attr("type", "button")
        .attr("class", "countdown")
        .attr("value", "0");
        
    function countup(target){ // ...