Input test (circle)

100%

Input test (circle)

✓ Published0🌍 Public

Last edited Nov 28, 2019

Created on Nov 28, 2019

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.

AI-generated description

This is a demonstration of the use of the html 'range' input using d3.js v5.

This graph is part of the code samples for the update to the book D3 Tips and Tricks to version 5 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

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

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

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

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

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

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

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