{"version":"1.0","type":"rich","title":"D3 and React","description":"Two React components render D3 visualizations side-by-side. A bar chart maps an array of values to SVG rectangles and text labels, using D3's data join with `selectAll`, `enter`, and attribute setters, with colors via HSL strings and classes for high/low values. A second component demonstrates React's managed rendering alongside unmanaged D3 updates, appending HTML elements, merging enter/update selections, and animating appended spans with `transition().duration().delay()`. Both components use `useRef` and `useEffect` to access the DOM, with data generated by `d3.range`.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"<iframe src=\"https://vizhub.com/viz/d942b705aad0416d86814920946052b8?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"0\"></iframe>","width":960,"height":500,"cache_age":3600}