Modify a circle's radius

100%

Modify a circle's radius

✓ Published0🌍 Public

Last edited Oct 1, 2021

Created on Oct 1, 2021

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.

AI-generated description

MIT Licensed

Similar vizzes

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

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

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

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

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

80% match

Loading thumbnail…

Growing Circle

A growing circle demonstrates interactive radius adjustment in a React and D3.js visualization. The example renders a single steelblue SVG circle centered on a 960x500 canvas, with buttons to increment or decrement its radius by 20 pixels. The code uses ReactDOM to mount the initial SVG, while D3's `select` API targets the circle by ID to update the `r` attribute, with a minimum radius constraint preventing negative values.

RRubens

75% match

Loading thumbnail…

Untitled

This example shows four circles arranged horizontally, each with a fixed radius of 10 pixels. A slider control allows the user to select a value between 2 and 40, and the chosen value is written to the document via `document.write` in the `changeSize` function. The visualization uses d3.v4 to bind an array of X positions to the circles and listens for slider changes with `d3.select("#mySlider").on("change")`. The SVG is rendered directly in the HTML with a fixed width of 400 pixels and height of 200 pixels.

Zzoniyac

74% match

Loading thumbnail…

slider

Two range sliders control the density and radius of a procedural circle texture applied to a rectangular SVG shape. Dragging either slider updates a texture generated with the `textures` library, which is then used as the rectangle’s fill via `textures.circles().size()` and `.radius()`. The SVG is rendered with d3.v4, which appends the rectangle to the chart area. Each slider also displays its current numeric value in an accompanying HTML paragraph.

Zzoniyac

71% match