{"version":"1.0","type":"rich","title":"D3 Transitions - Custom Tweens","description":"The example showcases circular transitions of data-driven points using D3.js, contrasting a default linear interpolation with a custom tween that animates along the shortest angular path. Two SVG canvases display circles that jump between random angles on a fixed radius. The left pane uses standard `transition().attr` calls, while the right pane employs a custom `transition().tween()` with D3's `interpolate` to handle angle wrapping and ensure smooth, direct movement across the circumference. The code updates the data on button click, demonstrating the API's flexibility for controlling animation behavior.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"<iframe src=\"https://vizhub.com/viz/711a98243bcc44f8bc30bda5ab7513ff?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"0\"></iframe>","width":960,"height":500,"cache_age":3600}