{"version":"1.0","type":"rich","title":"Transition Values with a Timer","description":"A circle transitions from the upper-left to the lower-right of an SVG canvas over five seconds, while a text label beside it continuously updates to display the circle's current x-coordinate. The code uses d3.transition to animate the circle's attributes and a d3.timer to poll the circle's rendered cx value during the animation, stopping after 5,000 milliseconds. This demonstrates an alternative to transition.attrTween for reading interpolated values, relying on timer-driven attribute inspection rather than tween callbacks.","provider_name":"VizHub AI Studio","provider_url":"https://next.vizhub.com","html":"<iframe src=\"https://next.vizhub.com/viz/gist-57fa5658a7522aceb5140c7c2bbccea1?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"1\"></iframe>","width":960,"height":500,"cache_age":3600}