Skip to main content
SimilarExport ZIP
100%

circles

✓ Published1🌍 Public
MMTR
Last edited May 6, 2021
Created on May 5, 2021
Forked from circle

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.

AI-generated description

A demonstration of how to start using D3 version 6.

MIT Licensed

Similar vizzes

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
90% match
Loading thumbnail…

Fork of Circles with D3

Seven colored circles, each 15 pixels in radius, rest in a horizontal line at the bottom left of a mint-green canvas. Hovering over any circle smoothly animates it into an evenly spaced orbit around the screen’s center, using an ease transition over one second; hovering again returns it to its original spot. The example demonstrates D3 v7’s `select().join()` for SVG element creation and stable keyed data binding, alongside `on('mouseenter')` event handling and the `transition().attr()` API for position tweening. All seven circles—red through violet—exist in a fixed dataset.

BBen Trantanella
85% match
Loading thumbnail…

rotating the circles

Three colored circles continuously rotate through a sequence of colors, shifting left and right in two separate animated containers. One container shows a set of three overlapping circles, while the other displays a single circle that cycles through green, blue, and orange. Using D3 v4’s data joins and transitions, each circle’s size, position, and z-index animate over 400 milliseconds, with the enter and exit selections resizing elements to create a smooth, circular rotation effect.

PPatrick Wojda
84% match
Loading thumbnail…

Circles with Animation

Eleven concentric circles pulse sequentially from a central point, expanding and collapsing in three alternating colors: red, green, and yellow. Each circle animates its radius from zero up to a multiple of its index times ten pixels, then shrinks back. The visualization uses D3 v5 selections with chained `transition().duration()` calls to animate SVG `circle` elements, setting radius, position, fill, and stroke attributes. The data array of indices 0 through 10 drives the size progression, while CSS opacity at 0.1 gives the overlapping circles a translucent, layered effect.

NNita
84% match
Loading thumbnail…

circles in D3

This example displays a static collection of thirteen colored circles scattered across a 600-by-400 SVG canvas, with varying radii, positions, and fills in blue, orange, and purple. The visualization uses no D3 or JavaScript logic, relying solely on hand-coded SVG elements inside an HTML document, with each circle defined by explicit `cx`, `cy`, `r`, and `fill` attributes. The rendering approach is direct SVG markup, and the code includes no data binding, interaction, or transitions.

Ee.rossi100@campus.unimib.it
84% match
Loading thumbnail…

circles in D3

This example displays a static collection of thirteen colored circles scattered across a 600-by-400 SVG canvas, with varying radii, positions, and fills in blue, orange, and purple. The visualization uses no D3 or JavaScript logic, relying solely on hand-coded SVG elements inside an HTML document, with each circle defined by explicit `cx`, `cy`, `r`, and `fill` attributes. The rendering approach is direct SVG markup, and the code includes no data binding, interaction, or transitions.

Ee.rossi100@campus.unimib.it
84% match
Loading thumbnail…

circles in D3

This example displays a static collection of thirteen colored circles scattered across a 600-by-400 SVG canvas, with varying radii, positions, and fills in blue, orange, and purple. The visualization uses no D3 or JavaScript logic, relying solely on hand-coded SVG elements inside an HTML document, with each circle defined by explicit `cx`, `cy`, `r`, and `fill` attributes. The rendering approach is direct SVG markup, and the code includes no data binding, interaction, or transitions.

Ee.rossi100@campus.unimib.it
84% match
Loading thumbnail…

Circles with d3

A static SVG visualization displays six concentric circles centered at the same point, each with a progressively smaller radius and a distinct fill color (red, green, blue, yellow, purple, orange) outlined in black. The circles are rendered using D3 v7’s data join pattern, where an array of circle objects with explicit `cx`, `cy`, `r`, `stroke`, `strokeWidth`, and `fill` properties is bound to SVG circle elements via `.data()` and `.enter().append()`. The example demonstrates basic shape creation and attribute binding with D3, using a hardcoded dataset rather than external data or animation.

BBar Shopen
84% match