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)

b8ca5e9baa1e4b65b6379cd43be6c1c7

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

Movable Lines Visualization

This visualization allows you to move connected lines by clicking on them and using the left/right arrow keys.

How to Use

  1. Click on any line group (labeled A, B, C, D, or E)
  2. Press the left arrow key to move the selected group left
  3. Press the right arrow key to move the selected group right
  4. Each key press moves the group by 10 units

The selected group will be the one that responds to keyboard input.