This is a comparison of transition easing functions in d3.js v4.
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 4 of d3.js.
Last active
March 26, 2024 14:45
-
-
Save d3noob/1ea51d03775b9650e8dfd03474e202fe to your computer and use it in GitHub Desktop.
Transition Easing Comparison in v4
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| license: mit |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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.v4.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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment