{"version":"1.0","type":"rich","title":"[01] The Basics - Using React Hooks with D3","description":"This example demonstrates how to combine React Hooks with D3 to render and update a simple SVG scatterplot. A `useState` hook manages an array of numeric data, while a `useRef` hook and `useEffect` hook initialize an SVG canvas using `d3.select` from D3 v5. Circles are appended via `selectAll(...).data(...).join('circle')`, with radius and position derived from each value. Clicking the “Update” button increments the data by 5, and “Filter” removes values over 35, triggering a re-render through React’s state changes.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"<iframe src=\"https://vizhub.com/viz/421e5931b9344910b682bb59d247c5aa?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"0\"></iframe>","width":960,"height":500,"cache_age":3600}