Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Shapes and Colors with SVG and CSS

Public visualization

Viewing a saved revision (read-only)

e8478297828443dd9976086d4564a494

Shapes and Colors with SVG and CSS

0 stars1🌍 Public
OOsekovS
Last edited Aug 15, 2020
Created on Aug 15, 2020

A dynamic fruit bowl visualization demonstrates SVG shape updates and color transitions using D3's data join pattern. Apples and lemons appear as circles with distinct fill colors and radius values, driven by ordinal scales for both color and size. The code uses `selection.enter`, `.merge`, and `.exit` methods with `transition().duration()` to animate circles entering, updating, and leaving as fruits are added, removed, or changed. JavaScript `setTimeout` calls trigger sequential data mutations, showing how D3 v5 handles animated updates to SVG elements.

AI-generated description

An example including some commonly used features of SVG.