Input test (circle)

100%

Input test (circle)

✓ Published0🌍 Public

Last edited Nov 4, 2016

Created on Nov 1, 2016

A single blue-outlined circle is centered in an SVG canvas, with its radius controlled by a slider input labeled "radius." Dragging the slider updates the circle's size in real time. The example uses D3 v4 to bind the input event and dynamically set the circle's `r` attribute, while the slider's value and displayed text are updated in the same handler. The SVG is rendered directly in the HTML body, and the initial radius is set to 120.

AI-generated description

Built with blockbuilder.org

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

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

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

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

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

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

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

78% match

Loading thumbnail…

Circles

This example demonstrates how multiple HTML input elements can control SVG circle properties in D3.js v6. It shows three interactive patterns: a number input that changes a circle’s radius, a dropdown menu that transitions a circle’s fill color via `selection.transition()`, and a range slider that resizes four circles simultaneously. The code uses `d3.select` to bind event listeners and `join` to populate options. The SVG is rendered directly in the DOM, with visual feedback updating in real time.

Bbepnye@gmail.com

77% match