This is a comparison of transition easing functions in d3.js v7.
The code uses the default value for each function.
This graph is part of the code samples for the update to the book D3 Tips and Tricks to version 7 of d3.js.
<!DOCTYPE html>
<meta charset="utf-8">
<style>
text {
fill: 'black';
font-family: 'Arial';
font-weight: bold;
font-size: 28px;
}
</style>
<body>
<!-- load the d3.js library -->
<script src="https://d3js.org/d3.v7.min.js"></script>
<script>
var easing = [
"easeElastic",
"easeBounce",
"easeLinear",
"easeSin",
"easeQuad",
"easeCubic",
"easePoly",
"easeCircle",
"easeExp",
"easeBack"
];
var svg = d3.select("body")
.append("svg")
.attr("width", 960)
.attr("height", 500);
function circleTransition(easement,yPos){
var timeCircle = svg.append("circle")
.attr("fill", "steelblue")
.attr("r", 20);
repeat();
function repeat() {
timeCircle
.attr('cx', 210) // position the circle at 40 on the x axis
.attr('cy', (yPos*45)+25) // position the circle at 250 on the y axis
.transition() // apply a transition
.ease(easement) // control the speed of the transition
.duration(4000) // apply it over 2000 milliseconds
.attr('cx', 720) // move the circle to 920 on the x axis
.transition() // apply a transition
.ease(easement) // control the speed of the transition
.duration(4000) // apply it over 2000 milliseconds
.attr('cx', 210) // return the circle to 40 on the x axis
.on("end", repeat); // when the transition finishes start again
};
var easeType = svg.append("text")
.attr("dy", ".35em") // set offset y position
.attr("x", 475)
.attr("text-anchor", "middle") // set anchor x justification
.attr("y", (yPos*45)+25)
.text(easing[yPos]);
};
circleTransition(d3.easeElastic,0);
circleTransition(d3.easeBounce,1);
circleTransition(d3.easeLinear,2);
circleTransition(d3.easeSin,3);
circleTransition(d3.easeQuad,4);
circleTransition(d3.easeCubic,5);
circleTransition(d3.easePoly,6);
circleTransition(d3.easeCircle,7);
circleTransition(d3.easeExp,8);
circleTransition(d3.easeBack,9);
</script>
</body>