Double Input Test

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.

94% match

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.

92% match

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.

92% match

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.

91% match

Input test (circle)

This example demonstrates a circle whose radius is controlled by an HTML range slider, with the current value displayed as text. It shows how user input can directly update a visual element in real time. A blue, non-filled SVG circle is drawn on a 600x300 canvas, and the slider’s "input" event triggers a D3 v4 update function that modifies the circle’s `r` attribute. The code uses D3 selections, `.on` for event handling, and `.attr` to bind the slider value to the circle’s radius.

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.

Input test (circle)

This example demonstrates interactive control of a circle’s radius using an HTML range slider. A blue-outlined circle is drawn in an SVG canvas at a fixed position, and its radius updates live as the user drags the slider. The code uses D3 v5’s `d3.select` and `on("input")` event listener to call an `update` function, which adjusts the circle’s `r` attribute and displays the current value in a label. The initial radius is set to 120, and the slider ranges from 1 to 150.

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.