{"version":"1.0","type":"rich","title":"Activity 6_Task 1","description":"This example renders a simple scatterplot with categorical y-axis labels and a quantitative x-axis, using React components to generate SVG ticks and lines. The `AxisBottom` component maps over scale ticks to draw vertical grid lines and formatted labels, while `AxisLeft` positions text labels at band centers. It imports `select` from D3 v5 to update the DOM, and the chart assumes data bound to the scales passed as props. The visualization demonstrates modular axis construction with reusable ES6 components.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"<iframe src=\"https://vizhub.com/viz/b9cafb7e9e174c21a2c7b7bcff76062a?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"0\"></iframe>","width":960,"height":500,"cache_age":3600}