{"version":"1.0","type":"rich","title":"[02] Curved Line Chart - Using React Hooks with D3","description":"This example demonstrates a curved line chart rendered as an SVG, where a dataset of numeric values is mapped to a path using D3’s `line` generator with the `curveCardinal` interpolation. The chart initializes with twenty points, and two buttons trigger updates: one increases every value by 5, while the other filters out values below 35, causing the line to redraw dynamically. React hooks (`useRef`, `useEffect`, `useState`) manage the SVG element and data state, while D3’s `select` and `path` joins handle the visual update. The viewport is set to 940 by 450 pixels, with a yellow fill and blue stroke.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"<iframe src=\"https://vizhub.com/viz/6238d41817cf4f9bbfa4158c65478271?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"0\"></iframe>","width":960,"height":500,"cache_age":3600}