Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Bowl of Fruits - Click to Select

Public visualization

Bowl of Fruits - Click to Select

0 stars0🌍 Public
OOvxOO
Last edited Aug 14, 2019
Created on Aug 14, 2019

This example demonstrates a dynamic fruit bowl visualization where users can click individual fruit circles to select them. It shows how D3’s general update pattern handles entering, updating, and exiting SVG elements with smooth transitions. The code uses `d3.scaleOrdinal` for color and radius mappings, `selection.enter()` and `selection.exit()` with `.transition()` to animate circle appearance and removal, and an `onClick` handler that triggers a re-render. Randomly generated fruit IDs serve as data keys, with apples and lemons represented as red and yellow circles.

AI-generated description

An example showing the capabilities of VizHub.

Comments

Sign in to join the discussion.

MIT Licensed