{"version":"1.0","type":"rich","title":"Scatter plot with React & D3","description":"This scatter plot visualizes the relationship between bill depth and bill length for penguins, using data loaded from a CSV file via `d3.csv`. Each circle represents a penguin, with a native SVG `<title>` element providing tooltip information. Built with React components that render D3 scales, the chart uses `d3.scaleLinear`, `extent`, and `format` for axis ticks, with axes and marks created by custom React components. The visualization demonstrates a React-D3 integration pattern where D3 handles data scaling and formatting while React manages the SVG rendering.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"<iframe src=\"https://vizhub.com/viz/ffb83129153541f98578ca402f7e56d0?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"0\"></iframe>","width":960,"height":500,"cache_age":3600}