Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Let's make a face with D3.js

Public visualization

Viewing a saved revision (read-only)

e99c485bb4564afa871a658515db49f2

Let's make a face with D3.js

0 stars0🌍 Public
JJake
Last edited Jul 2, 2020
Created on Jul 2, 2020

A radial face composed of colored fruit circles animates through updates and removals in an SVG scene, demonstrating D3.js join patterns with transitions. The code binds an array of fruit objects to `<g>` elements, using `scaleOrdinal` for color and radius mapping, and transitions each circle's position, fill, and text label over one-second durations. Data changes every second—popping, filtering, and modifying fruit types—triggering enter, update, and exit selections. The example runs in React with d3.v5, using `selection.data`, `groups.enter().append`, and chained `.transition().duration` calls for smooth morphing.

AI-generated description

A bare minimum HTML page.

See also React Starter.