{"version":"1.0","type":"rich","title":"Reusable plots","description":"This example demonstrates how to build reusable chart components in React with D3. It visualizes the classic Iris dataset as a scatter plot, mapping petal length on the x-axis and sepal width on the y-axis, with circle radii fixed at 7 pixels. The code separates axes and marks into distinct React components—AxisBottom, AxisLeft, and Marks—which accept scales and dimensions as props for reuse. It uses d3.scaleLinear with extent-based domains, d3.csv for data loading, and renders SVG elements via React’s JSX syntax.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"<iframe src=\"https://vizhub.com/viz/6bdca73f5a1e4c6d8a0c4805cf5ccf71?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"0\"></iframe>","width":960,"height":500,"cache_age":3600}