{"version":"1.0","type":"rich","title":"Shapes with SVG and CSS","description":"This example constructs a smiling face out of basic SVG shapes—circles, rectangles, and a path—drawn inside a 960 by 500 pixel canvas. The face is centered using a `transform` on a group, with static features like the yellow head, black outline, eyes, and an arc-based mouth. The eyebrows are rectangles that animate up and down using sequential `d3.transition()` calls, each lasting two seconds. The code leverages the D3.js v7 library's `select`, `append`, `attr`, and `arc` APIs within a React framework, rendering entirely as SVG.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"<iframe src=\"https://vizhub.com/viz/32f43969db3e47eeb60279bc143be678?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"0\"></iframe>","width":960,"height":500,"cache_age":3600}