<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title

100%

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title

✓ Published0🌍 Public

Last edited Nov 4, 2017

Created on Sep 23, 2017

This example demonstrates an interactive rectangle that can be resized and repositioned within a fixed map area using mouse or touch gestures. Dragging the corner handles adjusts the rectangle’s width and height while enforcing minimum size constraints, and dragging the rectangle’s interior moves it without exceeding the map boundaries. The visualization uses the D3.js library’s zoom and drag behaviors, with SVG elements for rendering and a custom zoom constraint function to keep the rectangle within the coordinate space. Numeric inputs for x, y, width, and height update live as the rectangle changes, reflecting the current state of the data.

AI-generated description

The rectangle can be resized by click-dragging the circle handles in the corners around but minimal size lengths are maintained (therefore the corner handles also cannot switch sides).

The rectangle can be dragged around by click-dragging anywhere else on the rectangle.

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

D3 Imagemap

This example demonstrates an interactive image-mapping tool built with React and D3 v7, allowing users to draw rectangular regions over a base map image. Users create selections by dragging the mouse on an SVG canvas, then attach URLs to each marked rectangle via a prompt. The interface includes a list of all selections with edit capabilities, where coordinates and dimensions can be modified or items deleted through a dialog. The implementation uses D3's event handling for mouse interactions, SVG `rect` elements with red transparent styling, and DOM manipulation to update the selection list dynamically.

LLiml

74% match

Loading thumbnail…

Rectangles using data

This example shows a blank interactive canvas with a single instructional text prompt, inviting code edits. The visualization uses D3 v4 to append an SVG element to the body, sized at 960 by 500 pixels, and places a monospaced text label at a fixed position. The code relies on D3’s selection and append methods to construct the SVG structure, though it renders no data-driven rectangles or other marks. The rendering approach is static SVG output, with no external data source loaded.

IIgathi

71% match

Loading thumbnail…

Pan & Zoom Axes

This example shows interactive pan and zoom axes, where a colorful gradient-filled rectangle serves as the plotting area and responds to user drags and wheel gestures. The visualization uses d3-zoom to handle transforms, which rescale the linear scales for both the x and y axes via *transform*.rescaleX and *transform*.rescaleY, updating the axis tick marks and grid lines accordingly. The same transform is applied directly to the SVG rectangle using the SVG transform attribute, while a reset button triggers a smooth transition back to the initial view. The code relies on d3.axisBottom and d3.axisRight to render the axes, with a custom linear gradient defined in SVG defs for the background fill.

GGerardoFurtado

71% match

Loading thumbnail…

Dynamic Size Example

This example demonstrates a dynamic, resizable visualization using the d3-boxes library, which computes nested rectangular layouts. When the browser window is resized, the `redraw` function recalculates the layout based on the new `clientWidth` and `clientHeight`, and updates an SVG graphic. The layout defines a vertical arrangement of boxes, including a horizontal sub-group whose size weight is doubled, and box "A" is given a size weight of 2. Each box is drawn with a colored rectangle, an X-shaped pair of lines, and a centered text label, all managed through D3's selection and merge APIs.

AAlainRo

70% match

Loading thumbnail…

Zooming and Panning

Four multicolored circles arranged in a square pattern sit at the center of an SVG canvas. The visualization demonstrates zooming and panning through d3.behavior.zoom, which captures mouse wheel drags and touch gestures. Users can scale the view between 1× and 10× magnification and pan freely by dragging. The circles’ positions are defined in data arrays and rendered as SVG circle elements with a translate transform applied to the parent group during zoom events.

IIgathi

70% match

Loading thumbnail…

Drag + Zoom

In this example, dots loaded from a TSV file are positioned in an SVG scatterplot with a light grid. Users can drag individual circles to move them, while clicking and dragging on the background pans the view, and the mousewheel zooms the entire scene. The code combines `d3.behavior.drag` and `d3.behavior.zoom`, using `stopPropagation` in the dragstarted handler to give dragging precedence over panning. Both behaviors update the container's transform attribute via the zoom event's translate and scale values, with dragged circles updating their cx and cy attributes.

Mmbostock

70% match

Loading thumbnail…

dots

This example displays ten colored rectangles that can be dragged around an SVG canvas. The shapes are randomly positioned and sized using D3’s `d3.range` and `Math.random()`, with each rectangle filled via the `d3.schemePastel1` color scheme. The interactive drag behavior is implemented with `d3.drag()`, which updates the x and y attributes in the `dragged` event and raises the selected element to the front on drag start.

KKhatera Alizada

70% match

Loading thumbnail…

Responding to Resize

This example demonstrates how a D3.js visualization can automatically adapt to its container size. A green X-shaped set of lines is drawn inside an SVG, and the entire graphic redraws whenever the browser window is resized. The code uses a fixed-position `#chart` div that fills the page, with `clientWidth` and `clientHeight` extracting the computed dimensions. Those values then set the SVG’s `width` and `height` attributes, and the lines are repositioned via a `redraw` function wired to the window’s `resize` event. The rendering uses SVG elements and D3’s data join pattern.

Kkosakase

70% match