style body height 200pt text fill black font family Arial font weight bold font size 28px style load the d3 js library script src https cdnjs cloudflare com ajax libs d3 7 2 0 d3 min js script script const width 900 const height 500 var svg d3 select body append svg attr width width attr height height function transitionDot easement easename yOffset var dot svg append circle attr fill lightblue attr r 20 var easeType svg append text attr dy 35em set offset y position attr x width 0 5 put text middle of screen x attr text anchor middle set anchor x justification attr y yOffset 45 25 text easename var update function dot attr cx 80 position the circle at on the x axis attr cy yOffset 45 20 position the circle at offset along y axis transition apply a transition attrTween fill function return d3 interpolateRgb red blue ease easement control the speed of the transition duration 4000 apply it over n milliseconds attr cx width 120 move the circle to x axis right side transition apply a transition attrTween fill function return d3 interpolateRgb blue red ease easement control the speed of the transition duration 4000 apply it over n milliseconds attr cx 80 return the circle to x axis left side on end update when the transition finishes start again update transitionDot d3 easeElastic easeElastic 0 transitionDot d3 easeBounce easeBounce 1 transitionDot d3 easeLinear easeLinear 2 transitionDot d3 easeSin easeSin 3 transitionDot d3 easeQuad easeQuad 4 transitionDot d3 easeCubic easeCubic 5 transitionDot d3 easePoly easePoly 6 transitionDot d3 easeCircle easeCircle 7 transitionDot d3 easeExp easeExp 8 transitionDot d3 easeBack easeBack 9 console log ready script
fill function return d3 interpolateRgb red blue ease easement control the speed of the transition duration 4000 apply it over n milliseconds attr cx width 120 move the circle to x axis right side transition apply a transition attrTween fill function return d3 interpolateRgb blue red ease easement control the speed of the transition duration 4000 apply it over n milliseconds attr cx 80 return the circle to x axis left side on end update when the transition finishes start again update transitionDot d3 easeElastic easeElastic 0 transitionDot d3 easeBounce easeBounce 1 transitionDot d3 easeLinear easeLinear 2 transitionDot d3 easeSin easeSin 3 transitionDot d3 easeQuad easeQuad 4 transitionDot d3 easeCubic easeCubic 5 transitionDot d3 easePoly easePoly 6 transitionDot d3 easeCircle easeCircle 7 transitionDot d3 easeExp easeExp 8 transitionDot d3 easeBack easeBack 9 console log ready script