{"version":"1.0","type":"rich","title":"d3js workshop - circles","description":"Three SVG circles sit in a row inside an 720x120 canvas, built with D3 v3’s selection and data-join pattern. The code defines a static dataset `[10, 20, 30]` and uses `append`, `attr`, and `style` to set each circle’s radius, vertical position, and horizontal offset based on its data value. A commented sequence demonstrates animated transitions: first changing fill color to red with a 2-second duration, then adding per-element delays, and finally combining color, radius, and vertical movement in one transition. All animation code remains inactive, showing only the initial static circles.","provider_name":"VizHub AI Studio","provider_url":"https://next.vizhub.com","html":"<iframe src=\"https://next.vizhub.com/viz/gist-c2d0d009e1184777b7665330256a2fe1?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"1\"></iframe>","width":960,"height":500,"cache_age":3600}