Animation in D3.js

Animation in D3.js

The data visualization tool D3.js provides a facility to create an animation effect with the help of transition. You can create interactive animation graphics with appropriate use of transition. The term transitions contain the restraint format of keyframes of animation, such as start and end. The first starting keyframe consistently defines the present state of Document Object Model (DOM), and the last ending keyframe determines the group of attributes, properties, and style.

The transitions are relevant to perform transitioning for a new view without specifying the complex code structure. This code structure is defined according to the starting view.

“Transition is referred as a mechanism of moving from one location to the next. D3.js facilitates you the transition() method to perform transition inside an HTML page.”

The emphasis of D3 on transformation obviously applies to animated transformations. Transitions usually interpolate the styles, properties, and attributes. You can manage twining by easing functions such as “cubic-in-out,” “elastic,” and the “flow.” The interpolators of D3.js supports all the primitives such as numbers and string embedded numbers (path data, font size) and compound values.                 

transition() Method

The transition() method is suitable for all the selectors, and it inaugurates the transition process. The transition() method helps you to convey all the selection () methods such as style(), attr(), etc. It doesn’t convey the data() and append() methods. It also facilitates you to use some special methods such as ease(), duration().

A basic example of transition() method is given below-

d3.select(“body”)
    .transition()
    .style(“background color”, “skyblue”);

You can also use the transition with the help of d3.transtion() method and it can be used by the selectors. It is shown in below code.

var t = d3.transition()
            .duration(3000);
d3.select(“body”)
     .transition(t)
     .style(“background-color”, “skyblue”);

Example

In the below given example, we are going to create a simple HTML file to understand the working functionality of transition.

<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
</head>
<body>
<h3>The Basic Transitions in D3.js</h3>
<script>
         d3.select("body").transition().style("background-color", "red");
</script>
</body>
</html>

Output

After the execution of the above code, you will get the below given result:

Animation in D3.js

In the above example, we have to select the body element and then start transition by invoking the transition() method. After it, we are advised to transit the background color from previous to next color, white to red color.

You can change the background color from white to red by refreshing the browser. You can change the colors in background with the help of the below-given code.

d3.select(“body”).transition(). Style(“background-color”, “any color you want to fix”);

Here, we have another example to elaborate the concept of transition() method.

Example

In the below given example, we are going to create a simple HTML file to understand the color-changing pattern of transition.

<!DOCTYPE html>
<html>
<head>
 <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
 </head>
 <body>
 <h3>Welcome to transitions</h3>
 <script>
 d3.select("body").style("background-color", "red")
 // make the background-color red.transition()
.style("background-color", "purple");
// make the background-color purple
</script>
</body>
</html>

Output

After the execution of the above code, you will get the below given result:

Animation in D3.js

In the above output, the background color is changed from white to purple.

duration() Method

The duration() method requires adjustment in properties to occur seamlessly over a defined period rather than simultaneously. This method helps occurring of transition very evenly and smoothly.

Example

Here, we have an illustration in which the transition takes 4 seconds to change the text color as defined in the below code-

<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
</head>
<body>
<h2>The Initial Transitions using duration() Method</h2>
 <script>
         d3.selectAll("h2").transition().style("color","red").duration(4000);
</script>
</body>
</html>

Output

After the successful compilation of the above code, you will get the following output:

Animation in D3.js

After 4 seconds the text color shown in the above snippet will be red. It is shown in below screenshot.

Animation in D3.js

Here, you can directly assign the value of color code (RGB) by using the following method as explained below-

d3.selectAll(“h2”) .transition() .style(“color”, “rgb(0,160,130)”) .duration(4000);

With the help of above-given methods, the color numbers smoothly, casually, and evenly belong from 0 to 160. You can also use the interpolate() method for factual integration of frames from start frame value to end frame value. The code of interpolate() method is defined below-

d3.interpolate(p, q)

In the D3.js you can use the following three types of interpolation. They are-

InterpolateRgb- It supports the color.

InterpolateNumber- This type of interpolation supports numerical values.

InterpolateString- It supports the strings.

D3.js take care of the appropriate interpolation process. In some cases, you can directly use the interpolate() method to achieve the required output, and according to the requirements, you can also create a new interpolate() method.

delay() Method

The delay() method enables the transition to take place after a predetermined period of time. Here, we have an illustration of the same:

Example

<!DOCTYPE html>
<html>
<head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
</head>
<body>
<h4> The Transitions using delay() Method </h4>
<script>
         d3.selectAll("h4").transition()
            .style("font-size","28px").delay(2000).duration(2000);
</script>
</body>
</html>

Output

After the successful compilation of the above code, you will get the following output:

Animation in D3.js

In the above screenshot, the font size of the text is small; but after 2 seconds the font size of the text is increased slowly and smoothly with the help of the delay() method, as shown in the below screenshot.

Animation in D3.js

Transition Lifecycle

Animation in D3.js

The transition contains the four-state life cycle, as shown in the above figure:

  1. Transition scheduled.
  2. Transition Starts.
  3. Transition runs.
  4. Transition ends.

Here, we will explain each state of transition lifecycle in detail.

State 1: Transition is scheduled

You can schedule a transition after the creation. The transition can be scheduled after invoking the selection.transition() method. The transition() method also appears when we invoke style(), attr(() method, and many other transition methods to determine the ending keyframe.

State 2: Transition Starts

A transition can be started according to its delay. It is defined when you declare the scheduling of the transition. If you don’t specify the delay() method, then the transition should be started very soon, but it will take a few milliseconds. If the transition has delayed, then the starting value doesn’t set. You can start it with the help of the following code:

d3.select(“body”)
    .transtion(()
    .delay(300)
    .each(“start”, function () {d3.select(this) .style(“color”, “red”); })
    .style(“color”, “blue”);

State 3: Transition Run

If the transition run, then it is consistently called with transition value from 0 to 1. In addition to duration and delay, transitions are easy to influence timing. Sometimes some functions provide you a value of t greater than 1 or less than 0.

State 4: Transition is Ends

The transition should always end on number 1. The ending should be fixed on an exact number during the transition ends. Usually, the transition ending depend upon the total number of duration and delay. When the transition process is stopped, then the end case is sent out.