{"version":"1.0","type":"rich","title":"practice 1 - Circle overlap or opacity check","description":"A circle-overlap visualization arranges ten concentric circles of increasing radius along a diagonal, each filled with a distinct color and outlined in black, to test how opacity reveals underlying shapes. The SVG rendering, created with D3 v5, uses `select` and `append` to add `<circle>` elements from an array of radius and color objects, with the data reversed before binding. The group containing the circles is scaled by 1.5 via a transform attribute, while each circle’s position and size are set directly from its radius value. This example demonstrates basic D3 data joins and SVG attribute manipulation.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"<iframe src=\"https://vizhub.com/viz/279bf4ab48864ed79e655cd5f005a1cc?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"0\"></iframe>","width":960,"height":500,"cache_age":3600}