{"version":"1.0","type":"rich","title":"React Hooks Bowl of Fruit","description":"A React Hooks component renders a static bowl of five red apples as SVG circles, with clicking one highlighting it via a black stroke. The code uses `useState` to manage the selected fruit ID and passes the selection handler down to the `FruitBowl` component. D3’s `scaleOrdinal` maps fruit types to colors and radii, while `range` generates the initial fruit array. The example demonstrates integrating D3 scales with React’s declarative rendering model, though commented-out code hints at possible transitions that are not active in this version.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"<iframe src=\"https://vizhub.com/viz/7f962b9d502846d997a5b449c4579626?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"0\"></iframe>","width":960,"height":500,"cache_age":3600}