Input test (circle)

100%

Input test (circle)

✓ Published0🌍 Public

Last edited Nov 30, 2019

Created on Apr 14, 2014

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.

AI-generated description

This is a simple example of implimenting an HTML input using a <range> input tag and using that to adjust a d3.js drawn svg element (a circle).

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

mit Licensed

Similar vizzes

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

96% match

Loading thumbnail…

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.

Dd3noob

94% match

Loading thumbnail…

Input test (circle)

A circle's radius is controlled by an HTML range slider, with its current value displayed as text. The example shows a blue, unfilled circle on an SVG canvas that resizes interactively as the slider is dragged. It uses the D3.js v7 library to select the input element and attach a listener to the range's "input" event, updating the circle's `r` attribute and label. The code initializes the radius to 120 and re-renders the SVG circle element through a custom `update` function, demonstrating a simple dynamic data binding between a native form control and vector graphics.

Dd3noob

94% match

Loading thumbnail…

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.

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

85% match

Loading thumbnail…

Input test

This example demonstrates how an HTML range slider can control the rotation of a text element rendered as SVG. The display shows the text “d3noob.org” centered on a 600 by 300 canvas, with its angle dynamically updated as the slider moves. Built with d3.js v4, the code uses d3.select to bind input events, update the displayed angle value, and apply rotation via the transform attribute’s rotate() function. The initial state is set to zero degrees, and the slider’s range spans from 0 to 360 degrees.

Dd3noob

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

84% match

Loading thumbnail…

Input test

A simple HTML range input controls the rotation of a text label in an SVG element, with the current angle displayed live beside the slider. The example uses D3.js version 3.5.17 to select the input element and bind its `input` event, updating both the text label and the `transform` attribute of the SVG `<text>` node via `attr`. The SVG is appended to the body with a fixed width and height, and the text is centered at coordinates (300,150). The code demonstrates event-driven interaction between native HTML form controls and D3-managed SVG rendering.

Dd3noob

83% match