Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Bowl of Fruit - Click events with D3.js!

Public visualization

Viewing a saved revision (read-only)

aafd29b3ef65491fb1279f731b6d7b6d

Bowl of Fruit - Click events with D3.js!

0 stars0🌍 Public
SSaroj Khanal
Last edited Jul 20, 2020
Created on Jul 20, 2020

This example demonstrates interactive SVG circles representing a bowl of fruit, where clicking a fruit highlights it with a black stroke. The visualization uses D3.js data joins to smoothly transition fruit sizes and positions when apples are removed or replaced with lemons over timed intervals. The `fruitBowl` function handles enter, update, and exit selections with animated radius and x-coordinate transitions. React is used as the framework wrapper, while `scaleOrdinal` maps fruit types to colors and radii, and event listeners trigger the selection state updates.

AI-generated description

Click events.

A bare minimum HTML page.

See also React Starter.