D3 Animations

D3 simplifies the process of animations with transitions. Transitions are made on DOM selections using .transition() method.

Below are the few important transition methods

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

Below is an example of color changing animation

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

Amazing page is here in the reference which shows various ease transition effects.


References:
https://www.tutorialsteacher.com/d3js/animation-with-d3js
https://bl.ocks.org/d3noob/1ea51d03775b9650e8dfd03474e202fe