{"version":"1.0","type":"rich","title":"Smiley face!","description":"This example renders a grid of eight procedurally generated smiley faces using React and SVG. Each face is composed of reusable components—a yellow background circle, two eyes, and a mouth—drawn with SVG primitives and positioned via a transformed `<g>` element. The mouth path is created using the D3 `arc()` generator, while `Math.random()` varies each face’s stroke width, eye radius, eye offset, and mouth thickness and radius, producing slight visual differences. The code imports React, ReactDOM, and D3’s `range` and `arc` functions, with rendering handled entirely in JSX.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"<iframe src=\"https://vizhub.com/viz/a26debc79021404a8790659e7813cbbe?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"0\"></iframe>","width":960,"height":500,"cache_age":3600}