Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

15_Bowl of Fruit - click to select - Interactions with unidirectional dataflow

Public visualization

15_Bowl of Fruit - click to select - Interactions with unidirectional dataflow

0 stars2🌍 Public
FFMajid-ops
Last edited Dec 18, 2020
Created on Dec 17, 2020

This example demonstrates interactive selection within a bowl of fruit, where clicking a circle highlights it with a black stroke and logs its unique ID. The visualization uses D3 v5’s selection API to manage a unidirectional dataflow: `fruitBowl` renders the SVG circles from an array of fruit objects, animating radius changes over one second via `.transition().duration(1000)`. The `index.js` script drives updates—removing an apple, mutating one to a lemon, and filtering—while the `onClick` callback triggers re-rendering. Color and radius scales are defined with `scaleOrdinal`.

AI-generated description

Comments

Sign in to join the discussion.

MIT Licensed