D3 Location

100%

✓ Published0🌍 Public

Last edited Sep 11, 2024

Created on Sep 10, 2024

Forked from React & D3 Drag with useReducer

This example demonstrates a network diagram of interconnected nodes, where users can drag circles to reposition them and observe the linked lines update in real time. The visualization uses React for state management with a `useReducer` hook, while `d3-drag` handles the interactive dragging behavior and D3's `select` and `range` APIs render the SVG elements. Links are drawn as thick black lines connecting sequential nodes, and circles are semi-transparent with hover effects. The code initializes positions from a small dataset and dispatches drag events to update the visualization's state.

AI-generated description

A basic demonstration of d3-drag used with React to drag circles connected by lines.

This variant uses useReducer to avoid creating a new closure on each render.

Inspired by Observable: Drag (SVG).

MIT Licensed

Similar vizzes

Loading thumbnail…

React & D3 Drag

This example demonstrates interactive dragging of circles connected by lines, built by combining React state management with D3's rendering capabilities. The visualization shows three semi-transparent circles linked by thick black lines, where dragging any circle updates its position and the connecting lines follow in real time. React's `useState` and `setData` manage the data array, while D3's `drag()` handler and `select()` method handle the SVG rendering and pointer interactions. The `VizWrapper` component delegates visual updates to the `viz` function, which uses D3's `range` and `join` operations to redraw the network on each data change.

CCurran Kelleher

87% match

Loading thumbnail…

React & D3 Drag with useReducer

This example shows three draggable circles connected by thick black lines in an SVG canvas. The circles and lines are rendered and updated using D3.js selectors and join operations, while React manages the application state. Dragging any circle dispatches a `drag` action to a `useReducer` hook, updating the circle’s x and y coordinates in the central state object. The D3 `drag` handler triggers the callback, and the Vue-like wrapper re-renders the visualization via the `viz.js` module. Animated interactivity is demonstrated through mouse hover effects and real-time position updates.

CCurran Kelleher

85% match

Loading thumbnail…

Fork of React & D3 Drag

Three draggable circles are connected by thick black lines, with hover interactions changing the stroke style. Built with React and D3.js v7, the visualization uses `d3.drag` to handle pointer events, updating state via React's `useState` and immutable data patterns. A `VizWrapper` delegates rendering to a D3 function that uses `selectAll` and `join` to update SVG circles and lines. The initial data consists of three coordinate pairs, rendered against a full-window SVG canvas.

Ddoankhanh122@gmail.com

80% match

Loading thumbnail…

lines with D3 and React

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.

BBismark Kofi Owusu Sarfo

79% match

Loading thumbnail…

d3 js

This visualization uses D3’s force simulation to lay out a network of nodes and links, with nodes rendered as circles and links as lines. The simulation applies charge, link, and centering forces through `d3.forceSimulation`, `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCenter`. Node positions update each tick, and the SVG is redrawn via D3’s data joins and `attr` methods. The example runs in a React-free HTML page, loading D3 v6 from a CDN.

SSrivastava

79% match

Loading thumbnail…

Fork of Rendering Data with React & D3

This example shows a network of draggable nodes connected by links, rendered with SVG inside a React component that uses d3.forceSimulation to compute positions. Clicking a node enables an attack button that injects a new red node and link into the graph. The code builds the visualization with d3.forceLink, d3.forceManyBody, and d3.forceCenter, and handles dragging through d3.drag. Static data defines three initial nodes and two links, with no external data source.

Zzarioualid@gmail.com

79% match

Loading thumbnail…

Untitled

This example demonstrates a React-based interactive visualization built with D3.js, displaying a force-directed network graph. The code uses `d3.forceSimulation` with forceLink, forceManyBody, and forceCenter to position nodes and edges, while SVG elements render the relationships. Nodes are draggable through `d3.drag`, and the visualization updates smoothly using React state management. The data source is embedded inline in the JavaScript, featuring a small set of interconnected entities. The example highlights how React and D3 can work together for dynamic graph exploration.

JJamesHop31

79% match

Loading thumbnail…

Fork of Mouse Follower & Path Drawer

This example demonstrates a React application that uses D3.js to render an interactive node-link diagram. Users click on circles (nodes) to select them; clicking a second node creates a black line (link) between the two, allowing for the construction of a custom graph. The SVG rendering approach uses React state to manage the lists of nodes and links, with individual circle elements responding to `onClick` events. The code also tracks a currently selected node, highlighting it in green, and uses a UUID generator for unique node identifiers.

Mmohamed el haddadi

79% match