{"version":"1.0","type":"rich","title":"Transitions","description":"This example demonstrates smooth animated transitions between two datasets of circles rendered as SVG. Three circles initially appear at fixed positions, then shift to new coordinates and radii when a button triggers the change. The code uses D3.js v4’s `transition()`, `delay()`, and `duration()` methods to animate the `cx` and `r` attributes over two seconds. The datasets `data1` and `data2` are simple arrays of numbers that define the circle properties, with the transition bound to a button click via the `triggerTransition` function.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"<iframe src=\"https://vizhub.com/viz/61cc89c19b834b8fa3e1faaeabab9513?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"0\"></iframe>","width":960,"height":500,"cache_age":3600}