Bowl of Fruits - Click to Select

100%

Bowl of Fruits - Click to Select

✓ Published0🌍 Public

Last edited Jul 27, 2020

Created on Jul 22, 2020

A bowl of fruit displays apples and lemons as colored circles, with the currently selected fruit highlighted by a black outline. Clicking any fruit triggers a transition that animates its radius and position, while removed fruits shrink and exit. The example uses D3 v5’s data joins with `selection.enter`, `merge`, and `exit` methods, alongside `scaleOrdinal` for color and size, and `transition.duration` for smooth animations. The `fruitBowl.js` module manages the interactive selection logic, while `index.html` loads the SVG container and D3 bundle.

AI-generated description

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

MIT Licensed

Similar vizzes

Loading thumbnail…

Bowl of Fruit -Click to select

A bowl of fruit shows five apples and a lemon as colored circles that can be clicked to select, highlighting the chosen fruit with a black stroke. The visualization animates fruit removal and type changes over time using D3 v5’s data join and transitions. The `fruitBowl` function uses `scaleOrdinal` for color and radius, with `selectAll`, `enter`, `merge`, and `exit` to manage circle elements, while `transition().duration(1000)` animates attribute changes on an SVG canvas.

Pprincit

96% match

Loading thumbnail…

Bowl of Fruit - Click to Select

A bowl of fruit demonstrates a click-to-select interaction with animated transitions. Apples and lemons render as colored circles using D3 v5's `scaleOrdinal` for color and radius, with smooth 1-second transitions on enter, update, and exit. Users click a fruit to highlight its selection with a black stroke. The code uses `selection.data`, `merge`, and `transition` to animate changes, while a script removes, replaces, and reorders fruits over time to show dynamic updates.

YYF

96% match

Loading thumbnail…

Bowl of fruit - Click to select

A bowl of fruit visualization displays five apples as colored circles, which can be clicked to select. The selection enlarges the chosen fruit, and over time apples are removed or replaced with lemons, with animations transitioning circle radii. The example uses d3 v5 with the `scaleOrdinal` color and radius scales, and shows enter, merge, and exit transitions via `transition().duration()`. The SVG rendering is updated through a `fruitBowl` function that handles click events and data changes.

MMaciek Sitkowski

96% match

Loading thumbnail…

Bowl of Fruit-Click to Select

A bowl of fruit demonstrates interactive selection and animated updates in D3.js v5. Clicking a circle highlights it with a black stroke and updates a selectedFruit variable, triggering a re-render. The fruitBowl function uses data joins with enter, merge, and exit selections, applying transitions on circle radii and positions. Ordinal scales map fruit types to colors and sizes, while setTimeout calls animate changes like removing apples, replacing one with a lemon, and filtering the data.

XX. N. Chu

95% match

Loading thumbnail…

Bowl of Fruit - click to select

A bowl of fruit demonstrates D3’s data-join with animated transitions, where apples and lemons are drawn as circles and clicking a fruit highlights it with a black stroke. The example uses `d3.scaleOrdinal` for colors and radii, `selection.transition().duration(1000)` to animate enter and exit, and a custom click handler to update the selected fruit. Rendered in SVG, the scene shows fruits being removed, replaced, and filtered over time.

BBrett

95% match

Loading thumbnail…

Bowl of Fruit - Click to Select

A bowl of fruit demonstrates D3.js data joins and interactive selection. Five apples render as circles that transition in size and position over time, with one apple morphing into a lemon and others disappearing. Clicking any fruit highlights it with a black stroke. The code uses `selection.data`, `enter`, `merge`, and `exit` with `transition.attr` to animate SVG circles, plus `scaleOrdinal` for color and radius mappings.

AArriannePandaraoan

95% match

Loading thumbnail…

Bowl of Fruit - Click To Select

A circular fruit bowl displays apples and lemons that users can click to select, with the chosen fruit highlighted by a thick black stroke. The visualization uses D3.js ordinal scales for color and radius mapping, and animated transitions smoothly resize circles on entry or exit when fruits are removed or replaced. The example animates data changes over time, showing apples being eaten and one apple transforming into a lemon, while maintaining click-based selection throughout the updates.

NNita

95% match

Loading thumbnail…

Bowl of Fruit - Click to Select

Five apples and a lemon render as colored circles, with a black outline marking the currently selected fruit. Clicking any fruit selects it, and items animate in and out of the bowl over time as apples are eaten or replaced. The visualization uses D3 v5’s data join with `selection.enter`, `merge`, and `exit` methods, transitioning circle radii and positions via `transition.attr`. An ordinal color scale maps fruit types to specific hex values, while the SVG canvas and its circle elements update dynamically.

Ffbudwill

95% match