Double Input Test

100%

Double Input Test

✓ Published0🌍 Public

Last edited Nov 30, 2019

Created on Apr 14, 2014

Two HTML range sliders control the height and width of a single blue-outlined rectangle rendered as an SVG element. Dragging either input triggers a D3 update function that resizes the rectangle symmetrically around its center. The example uses D3 version 3.5.17 to bind the `input` events and select/update the SVG `rect` attributes, while the slider labels display the current numeric values. The code demonstrates interactive coordination between standard form controls and D3-driven SVG manipulation.

AI-generated description

This is an example of implimenting multiple HTML inputs using <range> input tags and using them to adjust a d3.js drawn svg element (a rectangle).

It is used as an example and described in the book D3 Tips and Tricks.

mit Licensed

Similar vizzes

Loading thumbnail…

Double Input Test

Two HTML range inputs control the height and width of a single blue-outlined rectangle drawn in an SVG. The example demonstrates bidirectional interaction, where moving a slider updates both the displayed numeric label and the rectangle’s corresponding dimension, while the rectangle stays centered. The code uses D3 v7 selections and the `input` event listener to read slider values, then updates the SVG `rect` attributes via the `updateHeight` and `updateWidth` functions. The rectangle is initially rendered with fixed x and y positions before being adjusted.

Dd3noob

95% match

Loading thumbnail…

Double Input Test

Two HTML range inputs control the height and width of a single blue-outlined SVG rectangle, centered within a static 600×300 viewport. Dragging either slider updates the corresponding dimension and repositions the rectangle so its center remains fixed. The example uses d3.v6 to bind input events via `d3.select(...).on("input", ...)` and updates the rectangle’s `x`, `y`, `width`, and `height` attributes through custom `updateHeight` and `updateWidth` functions. Slider values are mirrored in the displayed label spans.

Dd3noob

95% match

Loading thumbnail…

Double Input Test

This visualization demonstrates how two HTML range sliders independently control the height and width of a blue-outlined rectangle. The rectangle is centered within an SVG canvas, and its size adjusts in real-time as the user moves either slider. The example uses D3.js v4 to handle both the rendering and the input events. The code binds the sliders' `input` events to functions that update the rectangle's `y` and `height` attributes for the vertical control, and `x` and `width` for the horizontal control, while also updating the displayed value spans.

Dd3noob

94% match

Loading thumbnail…

Double Input Test

This example demonstrates a blue outlined rectangle centered on an SVG canvas, with its height and width controlled by two HTML range input sliders. The visualization uses D3.js v5 to bind `input` events on the sliders, updating the rectangle’s `height`, `width`, `x`, and `y` attributes dynamically. The initial dimensions are set to 150 pixels high and 100 wide, while the slider text labels reflect the current values. The code uses `d3.select` to attach event listeners and `holder.selectAll` to modify the rectangle’s rendered attributes.

Dd3noob

92% match

Loading thumbnail…

Input test

This example demonstrates how an HTML range input can control multiple SVG elements simultaneously. Dragging the slider rotates two text labels, "d3.js" and "d3noob.org", in opposite directions. The code uses D3.js version 3.5.17 to append SVG text elements and listens to the input event on the range control, updating each text’s transform attribute with a new rotation angle. The slider value is displayed live in a label.

Dd3noob

86% match

Loading thumbnail…

Input test

An interactive range slider controls the rotation of two SVG text elements. Moving the slider changes the angle of the "d3.js" label in one direction while rotating the "d3noob.org" label in the opposite direction, with the current angle value displayed beside the slider. The example, built with D3.js v7, uses the `select` and `on` methods to attach an event listener for the `input` event, and `attr` to update the `transform` attributes of both text elements. The data is hardcoded, with the SVG canvas sized at 600 by 300 pixels.

Dd3noob

82% match

Loading thumbnail…

Input test

This interactive example demonstrates how an HTML range slider controls the rotation of two text labels. Dragging the slider changes the angle of "d3.js" text while simultaneously rotating "d3noob.org" in the opposite direction. The visualization uses D3 v4 to select the SVG elements and bind the input event to the update function, which modifies the rotate transform property of each text element. The page relies on D3's selection API (`d3.select`) and property accessor methods to synchronize the slider value with the displayed angle.

Dd3noob

82% match

Loading thumbnail…

Input test

This example uses an HTML range input slider to interactively rotate two text labels in an SVG scene. Dragging the slider changes the angle value, which is applied to rotate the "d3.js" and "d3noob.org" texts in opposite directions using `d3.select` and the `.on("input")` event. The SVG elements are updated by setting their `transform` attributes with the rotation angle, while the input’s value and label are synchronized through `d3.select` and `.property()`. The visualization demonstrates basic event handling and attribute binding with d3.js v6.

Dd3noob

82% match