{"version":"1.0","type":"rich","title":"Clean D3 Project Setup","description":"This example demonstrates a clean, modular D3 project structure by rendering a set of colored circles positioned on an SVG canvas. It shows how to separate data loading, visualization logic, and styling into distinct files, with data defined in a JavaScript module and imported alongside D3. Using D3 v7's `select` and `selectAll().data().join()` pattern, the visualization binds circle elements to the imported dataset and applies `cx`, `cy`, `r`, and `fill` attributes. The page is styled with a gradient background and a shadowed SVG container via plain CSS.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"<iframe src=\"https://vizhub.com/viz/cc610ff0f1d84a88b713db480369c5d2?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"0\"></iframe>","width":960,"height":500,"cache_age":3600}