Double Input Test

100%

Double Input Test

✓ Published0🌍 Public

Last edited Jun 19, 2021

Created on Jun 19, 2021

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.

AI-generated description

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

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

mit Licensed

Similar vizzes

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

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

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

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

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

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

79% match

Loading thumbnail…

Input test (circle)

This example demonstrates how to use an HTML range input to interactively adjust the radius of a circle rendered in an SVG element using D3.js v6. The page loads the D3 library from a CDN and creates a static circle with a blue stroke. When the user moves the slider, the `input` event handler calls an update function that modifies the circle’s `r` attribute and displays the current value in a label. The code uses `d3.select` to bind elements and the `property` method to sync the slider’s state.

Dd3noob

78% match