{"version":"1.0","type":"rich","title":"Fork of Overlapping Circles","description":"This example layers a CSS-clipped SVG circle with semi-transparent HTML text to create a hybrid visualization. The code uses React to render an SVG viewBox containing a clipPath element filled with randomly positioned text elements via JSX math, then applies the clip path to a red circle using `clip-path` and `xlink:href`. The embedded D3 script generates a word cloud with `d3.layout.cloud()`, positioning words like \"Hello\" and \"Coding\" across two overlapping black-stroked circles. While the React portion fixes the text positions randomly, the D3 part animates word placement through the cloud layout algorithm.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"<iframe src=\"https://vizhub.com/viz/b834718fe53b44c6b29e14752ab7c58e?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"0\"></iframe>","width":960,"height":500,"cache_age":3600}