Skip to main content
SimilarExport ZIP
100%

lines with D3 and React

✓ Published0🌍 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.

MIT Licensed

Similar vizzes

Loading thumbnail…

D3 scatter plot with react

This React-based scatter plot demonstrates animated data updates with D3.js. The visualization renders seven circles with distinct colors and sizes, positioned by x/y coordinates, with axes labeled X and Y. Data updates trigger a button click, which initiates D3 transitions using `transition().duration(1000).ease(easeLinear)` for enter animations and faster transitions for updates, while exit animations shrink circles to zero radius. The SVG rendering uses `scaleLinear`, `axisBottom`, `axisLeft`, and `selectAll('circle').join()` for binding data to DOM elements.

JJulien Tremblay
85% match
Loading thumbnail…

Circles with D3 and React

This example renders a scatterplot of 14 colored circles on an SVG canvas using React and D3. Each circle’s position, radius, and color come from static data defined in a separate JavaScript module. The visualization integrates React’s `useRef` and `useEffect` hooks with D3’s `select` method to bind data and create circle elements via `join`. The D3 v7 code applies `attr` setters for cx, cy, r, and fill properties.

CCurran Kelleher
83% match
Loading thumbnail…

Circles with D3 and React

The visualization displays fourteen circles of varying radii and colors positioned across a 960-by-500 SVG canvas, with each circle’s center, size, and fill defined by a static array of objects. Built with React 19 and D3 v7, the app uses a `useRef` hook to select the SVG element and applies a D3 `select` and `.join` operation to bind the data array to circle elements. The code sets each circle’s `cx`, `cy`, `r`, and `fill` attributes directly from the data source, showing a straightforward declarative mapping of data to SVG shapes.

BBismark Kofi Owusu Sarfo
82% match
Loading thumbnail…

Clickable Circles with D3 and React

A grid of pastel-colored circles, each positioned by explicit pixel coordinates from a static data array, fills the visualization. React manages the application state while D3's `select` and `join` methods render the SVG `<circle>` elements. Hovering a circle triggers a `mouseover` event that calls `setSelectedId`, updating React state and re-running the D3 selection to draw a black stroke around the active circle, while `mouseout` clears the highlight.

223100098@lums.edu.pk
81% match
Loading thumbnail…

Circles Part3

Three face-like clusters of circles are grouped and then re-sorted into rows by color when a button is clicked. The visualization uses React state to manage the SVG circles, with D3’s `selectAll`, `data`, and `transition` APIs to animate the `cy` attribute over one second. A `d3.nest` key operation groups circles by their color property, and the resulting groups trigger rendering of text labels. The example is built with React 16.9, D3 v5, and renders via SVG.

Mmbooch22
80% match
Loading thumbnail…

Clickable Circles with D3 and React

Clickable circles rendered in an SVG canvas demonstrate a React and D3 integration. The visualization shows 14 circles with varied positions, sizes, and colors from a static array. Clicking a circle selects it, highlighting its outline with a black stroke. The App component manages selection state and re-renders the D3 visualization via `select()` and `.join()` for efficient DOM updates. The `viz` function uses D3’s SVG selection API to set attributes and attach click handlers, while React’s `useState` and `useEffect` control the interactive response.

CCurran Kelleher
80% match
Loading thumbnail…

Interactive Dashboard Template

This example presents an interactive dashboard with two synchronized views of five data points: a scatter plot using circles and a bar chart. Clicking a circle or bar selects the corresponding data point, highlighting it in both charts simultaneously, with a background click to deselect. The visualization leverages D3 version 7 for scales and SVG rendering, including transitions with linear easing for style changes. React 19 manages the interface and shared selection state between the two charts.

CCurran Kelleher
80% match
Loading thumbnail…

Scatter Plot

This example renders a scatter plot of data points within an SVG using React. It leverages D3.js v5 to manage the visualization logic, while the rendering is handled through SVG elements defined in the JSX. The plot displays individual circles positioned on a 960 by 500 canvas, with a simple, uncluttered design. The code integrates D3 scales and axes to map data values to screen coordinates, though the specific dataset is not defined in the visible files.

Ppillliarun79
80% match