{"version":"1.0","type":"rich","title":"Gist bd22f3b52b22c16912001e3e858739bb","description":"This example demonstrates a basic data join with D3.js, showing how circles are appended to an SVG canvas based on an array of data. The visualization displays five grey circles positioned diagonally, with each circle’s x and y coordinates calculated from its index in the data array. The code uses D3’s `selectAll` and `data` methods to bind data to circle elements, followed by `enter().append()` to create new circles with fixed radius and fill color. The rendering approach is declarative, relying on D3’s data-join pattern rather than explicit loops.","provider_name":"VizHub AI Studio","provider_url":"https://next.vizhub.com","html":"<iframe src=\"https://next.vizhub.com/viz/gist-bd22f3b52b22c16912001e3e858739bb?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"1\"></iframe>","width":960,"height":500,"cache_age":3600}