{"version":"1.0","type":"rich","title":"D3 and React Hooks","description":"Two pie charts render identical datasets side by side, each taking a different approach to integrating D3 with React function components. The first, PieSVG, lets React fully manage the SVG lifecycle, mapping data arcs to JSX elements. The second, PieHooks, uses `useEffect` and `useRef` to imperatively manipulate the DOM with D3 selections like `selectAll`, `enter`, and `merge`. Both use `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` to generate and style the arcs, with random data regenerated on button click.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"<iframe src=\"https://vizhub.com/viz/90c463edbed14950909c62c301eea1c4?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"0\"></iframe>","width":960,"height":500,"cache_age":3600}