What is D3 transition?

A little about D3

D3 is an interactive JavaScript library for data visualization. It uses Scalar Vector Graphics (SVG) coupled with HTML and CSS to display charts and figures that illustrate the numeric data. You can also use D3 to make illustrations using different shapes and then animate those illustrations. d3.transition() lets us animate the objects we make using d3.select(). Here is an example of how to make a car and then animate it using d3.transition:

Step 1: Make canvas

Just as an artist needs a canvas to paint on, we need a canvas to illustrate and then animate on. Use d3.select("body") to make a canvas with appropriate height and width and then use this canvas object to append the shapes to it:

var canvas = d3.select("body")
      .append("svg")
      .attr("width", 600)
      .attr("height", 600);

var car_body = canvas.append("rect")
      .attr("width", 120)
      .attr("height", 45)
      .attr("fill", "blue")
      .attr("transform", "translate(0,30)");

      var car_top = canvas.append("rect")
      .attr("width", 50)
      .attr("height", 30)
      .attr("fill", "blue")
      .attr("transform", "translate(35,0)"); 
      
      var car_wheel_1 = canvas.append("circle")
      .attr("cx", 35)
      .attr("cy", 75)
      .attr("r", 15);

      var car_wheel_2 = canvas.append("circle")
      .attr("cx", 85)
      .attr("cy", 75)
      .attr("r", 15);

Animate it!

To make the car move, we use the magical d3.transition() method. Add .transtion() to your individual shapes and then add the transform attribute to translate the shapes accordingly:

car_body.transition()
      .attr("transform", "translate(200,30)");

      car_top.transition()
      .attr("transform", "translate(235,0)");

      car_wheel_1.transition()
      .attr("transform", "translate(200,0)");

      car_wheel_2.transition()
      .attr("transform", "translate(200,0)");

transition.duration()

Woah! The car is moving super fast. That is because the default time to execute the transition is half a second or 500 milliseconds(since the input is in milliseconds). But what if we want our car to be a smooth and steady cruiser instead of a speedy supercar? In that case, we can use the .duration attribute to make the transition last as long as we need it:

car_body.transition()
      .duration(4000)
      .attr("transform", "translate(200,30)");

Passing 4000 into the .duration method makes the transition last 4000 milliseconds or 4 seconds.

transition.delay()

While executing the code above, you may have noticed that the animation starts as soon as you hit the Run button. If you want to postpone, or delay the execution of animation, you can use the .delay method:

car_body.transition()
      .duration(4000)
      .delay(3000)
      .attr("transform", "translate(200,30)");

Passing 3000 into the .delay method makes the transition start 4000 milliseconds or 4 seconds late.

Note: Stay safe, drive slow!

transition.ease()

Now that our car moves at a normal pace, what if we wanted the motion to vary in different instances? We can change the way our car moves by using the .ease attribute. There are a lot of ways to ease the motion; linear, cubic, quadratic, polynomial, elastic, etc.

Here is a list of different attributes to use with .ease.

In the example below, the d3.easeElasticOut.amplitude(x).period(y) attribute is used with the .ease method. We can replace the x and y with the amplitude and period of our choice. For the example below, we have used x = 1 and y = 0.3.