{"version":"1.0","type":"rich","title":"lines with D3 and React","description":"This example displays a scatterplot of colored circles grouped into five labeled clusters (A–E), connected by colored lines. Clicking a line selects its group, and pressing the left or right arrow keys shifts every point in that group horizontally by 10 units, demonstrating a stateful React interaction driven by keyboard input. The visualization uses React 19 with a `useState`-managed data array, redrawn via `d3.select` and custom `viz.js` logic that builds SVG paths, circles, and axes, while `d3.scaleLinear` maps the 0–1000 x and 0–500 y coordinates.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"","width":960,"height":500,"cache_age":3600}