Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

lines with D3 and React

Public visualization

Viewing a saved revision (read-only)

4ef6fe92f4954824ba29b3977c7dcdd1

lines with D3 and React

0 stars0🌍 Public
BBismark Kofi Owusu Sarfo
Last edited Sep 17, 2025
Created on Sep 17, 2025

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.

AI-generated description