{"version":"1.0","type":"rich","title":"Circles with D3","description":"This example demonstrates how to draw a set of circles on an SVG canvas using D3.js version 7. Each circle is positioned with explicit x, y coordinates, has a defined radius, and is filled with a distinct color, resulting in an abstract layered composition on a light green background. The code uses D3’s `select` function and the data join pattern via `selectAll`, `data`, and `join` to bind an array of circle objects to SVG elements, then applies attributes like `cx`, `cy`, `r`, and `fill` through method chaining. The visualization is rendered dynamically by measuring the container’s dimensions at runtime, and the example includes a setup for hot reloading in a development environment.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"<iframe src=\"https://vizhub.com/viz/df17bb28d8b3431c914683ed6feffeca?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"0\"></iframe>","width":960,"height":500,"cache_age":3600}