Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

circles

Public visualization

Viewing a saved revision (read-only)

0ff110b12f0f480daf42e314f026b25d

circles

0 stars1🌍 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.