Input test (circle)

100%

Input test (circle)

✓ Published0🌍 Public

Last edited Jun 19, 2021

Created on Jun 19, 2021

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.

AI-generated description

This is a demonstration of the use of the html 'range' input 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…

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

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

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

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

94% match

Loading thumbnail…

Modify a circle's radius

A D3.js visualization demonstrates how a circle's radius changes interactively. A slider input controls the circle's size, with the current radius value displayed as text. The page renders a single SVG circle centered on a 600 by 400 canvas. The code uses the `d3.select` API to bind the range input's `input` event to an `update` function, which modifies both the circle's `r` attribute and the displayed numeric label. The initial radius is set to 100, and the slider allows adjustments from 1 to 150.

DDanilo De Rosa

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

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

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

80% match