Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Editor Demo

Public visualization

Viewing a saved revision (read-only)

53a8ef67ebf7413991d97ab1aa9f63a2

Editor Demo

0 stars1🌍 Public
CCurran Kelleher
Last edited Jan 31, 2024
Created on Jan 26, 2024
Forked from D3 Transitions

The editor demo showcases animated geometric shapes—circles and rectangles—with distinct colors and sizes arranged on a light purple background. It uses D3.js to bind data to SVG elements and applies transitions to animate shape attributes: circles expand via `attr('r', ...)` while rectangles grow from zero width and height, all with staggered delays. The code also demonstrates enter, update, and exit selections, with faster transitions moving shapes and slower ones morphing or removing them. The rendering is entirely SVG-based, driven by `d3.transition` with both slow and fast durations.

AI-generated description

Explore the coolness of D3 Transitions!