Circle

100%

✓ Published0🌍 Public

Last edited Nov 12, 2017

Created on Nov 12, 2017

Four red circles sit at the corners of a square in an SVG canvas. Each circle’s radius scales up or down based on how the browser window is resized, turning the circles blue as they grow. The code uses D3 v4’s `selectAll`, `data`, `enter`, and `merge` to bind the static `[cx, cy, r]` dataset and update radii via the `window.onresize` event. The resizing logic tracks the window width with a counter, clamping the scale to a minimum of one.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

Circle

The example shows a single red circle that remains centered within a blue container as the browser window resizes, turning blue after any size change. It uses d3.v4 with SVG rendering to bind data to a circle element, positioning it based on the container’s client dimensions. A general update pattern with `merge` and `exit` handles resizing, while a counter tracks window width changes to prevent the radius from shrinking below its initial value. The data is hardcoded in the script, and the visualization is built with Blockbuilder.

CCJKraenzle

89% match

Loading thumbnail…

Circles_1

A D3.js visualization renders four static shapes on an SVG canvas: two circles and two rectangles, each with hardcoded coordinates and fill colors. The circles appear at the top-left, followed by the rectangles further right and downward, demonstrating how to bind data arrays to SVG elements. The code uses d3.select, append, data, and enter to create the shapes, grouping circles into a dedicated SVG group element (`g`) before setting their positional and styling attributes via function callbacks. The example uses d3.v4 from the official CDN and displays no interactivity or animation.

MMettiHoof

80% match

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

Seven circles of varying sizes and colors float on a muted pink background. The visualization demonstrates static circle generation using D3 v7, with each circle’s position, radius, and fill color defined in a hardcoded array. The code uses `select`, `join`, and attribute setters like `.attr('cx')` and `.attr('r')` to render the shapes. A fixed opacity of 0.63 is applied uniformly, and the SVG resizes to its container dimensions.

Iissam.benabid@gmail.com

79% match

Loading thumbnail…

circles

Three concentric circles rotate continuously around a shared center, with red and green fills determined by radius and blue radial lines indicating rotation. The visualization uses D3 version 6 to append SVG `circle` and `line` elements inside `g` groups, updating their `transform` style via a JavaScript `setInterval` timer. A CSS `@keyframes` animation on hover triggers an additional 360-degree rotation. The code demonstrates D3’s declarative selection and merging API with `d3.select`, `enter`, and `merge` on an SVG canvas sized to viewport dimensions.

MMTR

79% match

Loading thumbnail…

Circles with D3

A D3.js visualization renders seven semi-transparent circles on an SVG canvas, each positioned by x/y coordinates with varying radii and bright fill colors against a pale green background. The code demonstrates the General Update Pattern by joining data to SVG circle elements, setting attributes for position, size, and fill via chained `.attr()` methods. It uses `select` from D3 to handle the container element, measuring its dimensions with `clientWidth` and `clientHeight` to size the responsive SVG, while the `opacity` attribute creates an overlapping effect between the colorful bubbles.

SStephen HC Lin

79% match

Loading thumbnail…

Circles

A static collection of six colored circles sits on a light green background, each with a distinct position, radius, and fill color. The visualization demonstrates basic D3.js shape rendering within a Svelte component using the `select` API to create an SVG canvas. Data is stored as an array of objects containing `x`, `y`, `r`, and `fill` properties, which are bound to `<circle>` elements via `attr` calls. The circles use a uniform opacity value of 0.708, creating a subtle translucency across all shapes.

Rrichard.adamson@hotmail.com

79% match

Loading thumbnail…

circle

A single red circle rendered in SVG, centered within a full-viewport canvas, with a green radial line extending from its center to the right edge. The visualization demonstrates basic D3.js v6 setup and styling, using inline SVG elements and a CSS hover animation that rotates the entire group containing both shapes. The code defines a `g` element with an id, positions it via a CSS transform, and applies a keyframe animation on hover that spins the group 360 degrees over five seconds. No data is loaded; the example focuses purely on static geometric primitives and interactive CSS-driven motion within an SVG coordinate system.

MMTR

78% match