{"version":"1.0","type":"rich","title":"[03] Axes and scales - Using React Hooks with D3","description":"This example shows a line chart of an array of numeric values rendered as a smooth, cardinal-curved path with labeled axes. The code uses React Hooks with `useState` and `useRef` to manage data and the SVG element, while D3 v5’s `scaleLinear`, `axisBottom`, `axisRight`, and `line` with `curveCardinal` construct the visualization. Buttons update or filter the data, triggering a re-render that redraws the line and axes against a fixed 900×400 SVG viewport.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"<iframe src=\"https://vizhub.com/viz/e78aa232bf624629854a38340e36679a?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"0\"></iframe>","width":960,"height":500,"cache_age":3600}