Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

D3 Animation - Bowl of Fruit

Public visualization

Viewing a saved revision (read-only)

e7f32c787d3a4851bbfe2543d7f6a1ce

D3 Animation - Bowl of Fruit

0 stars1🌍 Public
YYoung Song
Last edited Jun 23, 2022
Created on Jun 19, 2022

A bowl of fruit demonstrates animated data updates and mouse-based selection in SVG. Circles represent fruit types, with color and size mapped through ordinal scales. The animation uses `transition().duration()` to smoothly move and resize marks as items are added, removed, or changed over time. Hovering highlights a fruit with a black stroke, and the `fruitBowl` function manages enter, update, and exit transitions for circles and labels.

AI-generated description
  • Listening for Click Event
  • Unidirectional Data Flow Concept
  • Selecting a Mark by Clicking
  • Highlighting Selected Mark
  • Selecting a Mark by Hovering