Skip to main content
SimilarExport ZIP
100%

Fork of D3 drag test

✓ Published0🌍 Public
Ffilipwydra
Last edited Jul 7, 2022
Created on Mar 15, 2022
Forked from D3 drag test

Two draggable panes demonstrate interactive split-pane resizing using D3 v5 and React. The `d3.drag` API handles pointer events on a central divider, updating pane widths via the `setOffset` function, which recalculates each pane’s style width in pixels. Starting with the left pane at one-third of the viewport width, the layout responds live to dragging, with the container’s width read from its computed style. The example employs HTML/CSS for structure and styling, with D3’s `select`, `selectAll`, and `event` utilities coordinating the interaction.

AI-generated description

A bare minimum HTML page.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

D3 drag test

This example demonstrates a draggable splitter that resizes two adjacent panes in a web layout. Using D3 v5’s `drag` behavior, dragging the central divider horizontally triggers `event.x` to update each pane’s inline width and reposition the splitter via `setOffset`. The panes hold static text, with dimensions computed from the container’s current pixel width. The implementation uses `select`, `selectAll`, and `style` from D3, plus React for overall structure, and plain CSS for layout and hover cursor styling.

Ggjonor
91% 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
76% match
Loading thumbnail…

Vertical Split View

This example demonstrates a vertically split view that divides a container into two adjustable content areas separated by a draggable resizing marker. The layout is built using React with D3 v7, featuring a tabbed view nested within the split panes. The code constructs modular, reusable view components through closure-based factory functions, managing DOM elements via D3 selections and styling with inline CSS properties. Interactive resizing is driven by mouse event handling to reposition the marker and recalculate pane dimensions dynamically.

Ttux.harmon@gmail.com
76% match
Loading thumbnail…

Fork of MIAGE base

This example demonstrates a draggable HTML div alongside an interactive SVG scene built with React and D3 v5. The SVG contains colored circles that animate on click and double-click events, and a separate rectangle that appends new colored rectangles as the mouse moves across the body. The React component tracks mouse position to render a circle, while D3 functions handle SVG manipulation and transitions. The page includes a draggable header, using CSS and JavaScript for the drag behavior, and displays a message element updated with D3 selectors.

PPedram
73% match
Loading thumbnail…

React Starter

This example demonstrates how to integrate React with D3 by building a resizable SVG container. A draggable div wrapper, observed via ResizeObserver, updates the SVG’s width and height state through a custom React hook (useState, useEffect) and D3’s drag behavior. The visualization shows the interplay between React’s declarative rendering and D3’s imperative event handling. It uses React 16, ReactDOM, d3.select, d3.drag, and d3.event to log and apply dynamic size changes.

Ggjonor
73% match
Loading thumbnail…

d3 class practice

This example demonstrates a before-and-after image comparison slider with a draggable white divider. The interface lets users interactively reveal one of two photographs by dragging the resizer horizontally across the container. The implementation relies on plain JavaScript event listeners for mouse and touch interactions, manipulating DOM element widths and positions directly. It uses CSS gradients and flexbox for styling, with images sourced from Pexels, and does not utilize any D3 or React APIs despite the title.

TThandolwethu Shakes Dlamini
71% match
Loading thumbnail…

Horizonal Split View

This example demonstrates a reusable horizontal split view interface for organizing content into two resizable panels within a D3.js application. The view renders an upper and lower content area, separated by a draggable resizing marker that users can adjust to change each panel’s height. Built on D3 v7 and React, the code uses closures to manage layout state and render functions, with the tabbed view and blank layout modules providing additional structural context. The example highlights a modular approach to building flexible, nested UI components using D3’s DOM manipulation capabilities.

Ttux.harmon@gmail.com
71% 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
70% match