Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

d3
javascript
animation
transition ease

What is D3 transition?

Educative Answers Team

Grokking Modern System Design Interview for Engineers & Managers

Ace your System Design Interview and take your career to the next level. Learn to handle the design of applications like Netflix, Quora, Facebook, Uber, and many more in a 45-min interview. Learn the RESHADED framework for architecting web-scale applications by determining requirements, constraints, and assumptions before diving into a step-by-step design process.

svg viewer

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);

Make a car!

This is a pretty straightforward step. You can make your figures basic, or you can be creative and make them extremely detailed. It solely depends on the artist! For this example, we are going to make a simple car with two rectangles and two circles.

svg viewer
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.

RELATED TAGS

d3
javascript
animation
transition ease
Copyright ©2022 Educative, Inc. All rights reserved

Grokking Modern System Design Interview for Engineers & Managers

Ace your System Design Interview and take your career to the next level. Learn to handle the design of applications like Netflix, Quora, Facebook, Uber, and many more in a 45-min interview. Learn the RESHADED framework for architecting web-scale applications by determining requirements, constraints, and assumptions before diving into a step-by-step design process.

Keep Exploring