{"version":"1.0","type":"rich","title":"Learn D3 1","description":"This example demonstrates how D3's data join pattern updates circle elements in an SVG as the dataset changes. It first binds an array of two numbers to render a row of circles, then reuses the same selection with a longer array of five numbers, causing the existing circles to update and new ones to enter. The visualization uses the `join()` method in D3 v7 with the `selectAll` and `data` APIs, setting each circle's position via the `cx` attribute based on its bound value. The code runs within a simple container using `select` and creates a fixed 980 by 500 SVG canvas.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"<iframe src=\"https://vizhub.com/viz/8d092f1e4a5a47b2a108d7438192b51e?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"0\"></iframe>","width":960,"height":500,"cache_age":3600}