{"version":"1.0","type":"rich","title":"Transition Values - Tween Function","description":"A circle moves diagonally across an SVG canvas while a text label continuously displays its current x-coordinate, updated during the transition. The example demonstrates a tween function applied to a dummy attribute, `attr.fill`, which is never actually changed. Instead, the tween callback reads the circle’s `cx` attribute at each tick and updates the text content accordingly. Using d3.v4, the code relies on `transition.attrTween` (via `.tween`) and `node.getAttribute` to access live interpolated values over a 5-second duration.","provider_name":"VizHub AI Studio","provider_url":"https://next.vizhub.com","html":"<iframe src=\"https://next.vizhub.com/viz/gist-8c291c0d2a5db187074f28fb448d8b9a?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"1\"></iframe>","width":960,"height":500,"cache_age":3600}