Growing Circle

100%

Growing Circle

✓ Published0🌍 Public

Last edited Jan 27, 2020

Created on Jan 27, 2020

Forked from A

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.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Circles

A set of 40 concentric circles radiates from the center of an SVG canvas, each stroke drawn in solid red with 50% opacity and a 10-pixel width. The circles grow from a minimum radius of 20 to a maximum of 80, incrementing linearly, while the outermost circle reaches a radius of 300. Rendered using React’s `ReactDOM.render` into a `div` root, the visualization maps an array of radii to `<circle>` elements, with the SVG dimensions fixed at 960 by 500 pixels. The code explicitly computes radius values in a loop, though the final array contains a single undefined element.

NNita

79% match

Loading thumbnail…

Circles with D3 and React

The visualization displays fourteen circles of varying radii and colors positioned across a 960-by-500 SVG canvas, with each circle’s center, size, and fill defined by a static array of objects. Built with React 19 and D3 v7, the app uses a `useRef` hook to select the SVG element and applies a D3 `select` and `.join` operation to bind the data array to circle elements. The code sets each circle’s `cx`, `cy`, `r`, and `fill` attributes directly from the data source, showing a straightforward declarative mapping of data to SVG shapes.

BBismark Kofi Owusu Sarfo

78% match

Loading thumbnail…

Circling Circles

A static SVG scene shows a large green circle, centered on a white background, whose thick black outline is punctuated by four smaller blue circles positioned at the cardinal points. Each small circle has its own yellow stroke, and the arrangement suggests a minimalist orbital motif. Built with React, the markup is generated via JSX, while D3 v5 is imported for its `select` API, though the visualization itself relies purely on SVG circle elements and window dimensions for sizing.

KKamalabot

77% match

Loading thumbnail…

d3 Starter

This visualization demonstrates a minimal starting point for building with D3, displaying a single large circle centered near the left side of an SVG canvas. The code uses D3 v7's `select` function to target the existing SVG element, then appends a circle with `append`, setting its radius to 300 and horizontal position to 300 via the `attr` method. While minimal, it establishes the core pattern of selecting, appending, and styling SVG elements.

JJason

76% match

Loading thumbnail…

Interactive circle

This example shows how a user’s pointer position directly controls the placement of a single circle within an SVG canvas. As the mouse moves over the full-width, full-height SVG, the circle centers itself exactly at the cursor’s client coordinates. Built with React (using the `useState` and `useCallback` hooks) and D3 v7 for rendering, the app updates the circle’s `cx` and `cy` attributes through React state changes triggered by the `onMouseMove` event. The visualization demonstrates a simple, responsive interaction pattern without external data sources.

Ttim10133222

76% match

Loading thumbnail…

D3: Drawing SVGs

This example demonstrates how to create basic SVG shapes with D3.js by rendering five circles of increasing radius. The code uses D3’s data join pattern, calling `selectAll`, `data`, `enter`, and `append` to bind an array of five numbers to circle elements. Each circle’s x-position is calculated from its index, its radius from the bound data value, and its fill, stroke, and stroke-width are set accordingly. The static SVG is 500 pixels wide and 50 pixels tall, with all circles vertically centered.

MMarisa Tania

76% match

Loading thumbnail…

Compact circles

This example displays a dense cluster of small semi-transparent circles scattered within a larger bounding circle on an SVG canvas. The visualization uses a nested loop over a fixed array of values to generate candidate positions, then filters them with a distance check against the container radius. Built with React and ReactDOM, it renders each circle as an SVG `<circle>` element, using the `Math.random()` function to jitter the positions so the distribution appears organic.

NNita

76% match

Loading thumbnail…

Clickable Circles with D3 and React

Clickable circles rendered in an SVG canvas demonstrate a React and D3 integration. The visualization shows 14 circles with varied positions, sizes, and colors from a static array. Clicking a circle selects it, highlighting its outline with a black stroke. The App component manages selection state and re-renders the D3 visualization via `select()` and `.join()` for efficient DOM updates. The `viz` function uses D3’s SVG selection API to set attributes and attach click handlers, while React’s `useState` and `useEffect` control the interactive response.

CCurran Kelleher

76% match