Double Input Test

100%

Double Input Test

✓ Published0🌍 Public

Last edited Aug 16, 2016

Created on Aug 16, 2016

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.

AI-generated description

This is a demonstration of the use of two html 'range' inputs using d3.js v4.

This graph is part of the code samples for the update to the book D3 Tips and Tricks to version 4 of d3.js.

Similar vizzes

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

94% match

Loading thumbnail…

Double Input Test

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.

Dd3noob

94% match

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

93% 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

93% 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

79% 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

79% match

Loading thumbnail…

Input test (circle)

This example demonstrates how an HTML range input slider can control the radius of an SVG circle drawn with D3.js. Moving the slider updates the displayed radius value and resizes the circle's `r` attribute in real time. The code uses a `<input type="range">` element with an `input` event listener, and D3's selection methods (`d3.select`, `.on`, `.property`, `.attr`) to synchronize the slider, text label, and circle. The visualization is rendered as an SVG element in the browser without any external data source.

Dd3noob

78% 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

78% match