Animation in D3

In this chapter, we will learn how to create animations in D3 and how to handle D3 mouse events.

D3 simplifies the process of animations with transitions. Transitions are made on DOM selections using <selection>.transition() method. The following table lists important methods for animation in D3.

Method	Description
selection.transition()	this schedules a transition for the selected elements
transition.duration()	duration specifies the animation duration in milliseconds for each element
transition.ease()	ease specifies the easing function, example: linear, elastic, bounce
transition.delay()	delay specifies the delay in animation in milliseconds for each element

Animation is nothing but a transition from one form to another. In this case, an animation would be a transition between the starting and ending states of the DOM element.

transition()

The d3.selection.transition() method indicates the start of transition and then different transition functions can be applied to the selected elements.

The following example demonstrates changing the background color of a div from black to red with animation.

Example: D3 Animation
<!doctype html>
<html>
<head>
<style>
    #container {
        height: 100px;
        width: 100px;
        background-color: black;
    }
</style>
<script src="https://d3js.org/d3.v4.min.js"></script>
</head>
<body>
    <div id="container"></div>

    <script>
        d3.select("#container")
          .transition()
          .duration(1000)
          .style("background-color", "red");
    </script>
</body>
</html>Try it

In the above example, we have created a div element called 'container' and added a class to give it a height, width, and background color black. Now, we would like to create a transition to change the color from black to red. We use the transition() function to create the transition on the selected 'container' element. We then called the duration() function to specify how long the transition should take place. In this case, we have specified a value of 1000 milliseconds.

You can also create a transition and store it in a variable. Use it to apply animations to different elements in your visualization as shown below.

var t = d3.transition()
        .duration(500)

    d3.select("#container")
      .transition(t)
      .style("background-color", "red");

transition.ease

The ease() function is used to specify and control the motion of the transition.

You can take a look at the various easing function in this easing comparison example on D3's sharing blocks. In this chapter, we will demonstrate the d3.easeLinear() function.

transition.delay

The delay() function sets the delay parameter for each element in the selection on which the transition is applied. The transition will start after the specified delay value.

Let's look at an example.

We will animate two bars on their height with a linear ease. We will start with the first bar and increase its height from 20px to 100px. Next, we will animate the second bar the same way. But we will apply a delay of 2000 milliseconds on the second bar so that it is animated 2000 milliseconds after the first bar.

Example: Animation
<body>
<script>
    var svg = d3.select("body")
        .append("svg")
        .attr("width", 500)
        .attr("height", 500);


    var bar1 = svg.append("rect")
        .attr("fill", "blue")
        .attr("x", 100)
        .attr("y", 20)
        .attr("height", 20)
        .attr("width", 10)

    var bar2 = svg.append("rect")
        .attr("fill", "blue")
        .attr("x", 120)
        .attr("y", 20)
        .attr("height", 20)
        .attr("width", 10)

    update();

function update() {
    bar1.transition()
        .ease(d3.easeLinear)
        .duration(2000)
        .attr("height",100)

    bar2.transition()
        .ease(d3.easeLinear)
        .duration(2000)
        .delay(2000)
        .attr("height",100)
}
</script>
</body>
Try it

Let's walk through the above code.

var bar1 = svg.append("rect")
            .attr("fill", "blue")
            .attr("x", 100)
            .attr("y", 20)
            .attr("height", 20)
            .attr("width", 10)

var bar2 = svg.append("rect")
            .attr("fill", "blue")
            .attr("x", 120)
            .attr("y", 20)
            .attr("height", 20)
            .attr("width", 10)

We have added two rectangles to SVG. The first bar is placed at [100, 20] and the second bar is at [120, 20]. Both have a height of 20px and width of 10px each.


function update() {
        bar1.transition()
            .ease(d3.easeLinear)
            .duration(2000)
            .attr("height",100)

        bar2.transition()
            .ease(d3.easeLinear)
            .duration(2000)
            .delay(2000)
            .attr("height",100)
    }

In the update function, we animate the first bar by increasing its height to 100px. Then, we give it a transition of linear ease for the duration of 2000 milliseconds. Next, we animate the second bar with the same transition of linear ease and 2000 milliseconds duration. But, we also add a delay of 2000 milliseconds so that the second bar starts its transition 2000 milliseconds after the first bar started its transition.

Thus, we can apply animation with D3.js.

You can go through all the available d3 transition functions on D3 API Documentation.