Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Hover to Select

Public visualization

Viewing a saved revision (read-only)

3ab8a3751a43491c99e649dbeed6775f

Hover to Select

0 stars0🌍 Public
AArriannePandaraoan
Last edited Apr 21, 2020
Created on Apr 21, 2020

This example demonstrates interactive selection in an animated fruit bowl visualization. Rendered as SVG circles with D3 transitions, apples and lemons move and resize smoothly while mouseover events highlight a selected fruit with a black stroke. The code uses D3 v5’s `scaleOrdinal` for color and radius mapping, and `selection.on` handlers with a stateful `selectedFruit` variable to trigger re-rendering via `fruitBowl`. Data updates through timed mutations, including removing and replacing fruits, show enter, update, and exit transitions.

AI-generated description

Demonstrates fundamental DOM manipulation using D3.js by making a smiley face whose eyebrows move.