Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Let's make a face with D3.js!

Public visualization

Let's make a face with D3.js!

0 stars2🌍 Public
RRoger Yu-Hsiang Lo
Last edited Feb 8, 2020
Created on Feb 6, 2020

A sequence of animated circles demonstrates the D3.js transition API as five apples shrink, disappear, and transform into a lemon over four seconds. The example uses `d3.select`, `d3.range`, and a custom `fruitBowl` module with `selection.transition().duration(1000)` to smoothly interpolate circle radii, x-positions, and fill colors. Data modifications—removing array elements and changing a fruit type—trigger re-renders, while `d3.scaleOrdinal` maps fruit types to colors and radii. The SVG output is updated incrementally at one-second intervals.

AI-generated description

Comments

Sign in to join the discussion.

MIT Licensed