Skip to main content
SimilarExport ZIP
100%

Bowl of Fruit - Click to selected

✓ Published1🌍 Public
YYifu Chen
Last edited Dec 28, 2019
Created on Dec 28, 2019

Five fruit circles transition and animate inside an SVG as apples are removed and one apple becomes a lemon. Clicking any fruit highlights it with a blue stroke, and the selection persists through data updates. Built with D3 v5, the visualization uses a data join with enter, merge, and exit selections, plus `transition().duration()` for size and position animation. Fruit type maps to color and radius via `scaleOrdinal`.

AI-generated description

Yifu's practice on click to select with d3.js

Tutorial: https://www.youtube.com/watchv=_8V5o2UHG0E&t=1220s

Dec. 28, 2019

MIT Licensed

Similar vizzes

Loading thumbnail…

Bowl of Fruit - Click to Select

Five fruit circles render in an SVG, starting as apples that can be clicked to highlight with a black stroke via a selectedFruit ID. The visualization uses d3’s scaleOrdinal for color and radius, a data join with enter/exit transitions to animate circles shrinking to zero radius, and timed updates that remove fruits or change an apple to a lemon. d3.v5 powers the transitions and event handling.

TTomoyukiEguchi
95% match
Loading thumbnail…

Bowl of Fruit - Click to select

Five fruit circles, apples and lemons, render in a row as an SVG visualization. Clicking a fruit selects it and gives it a black outline. The example demonstrates data joins with `selection.data`, enter/exit transitions using `transition.attr`, and an ordinal color scale from `d3.scaleOrdinal`. Fruits are dynamically removed or changed in type over time, with animated resizing and repositioning for visual feedback.

EEdoardoRegini
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
Loading thumbnail…

Bowl of Fruit - Click to Select

Five fruit circles render in an SVG, with apples in red and lemons in yellow. Clicking any fruit selects it, applying a black stroke. The visualization uses D3 v5 data joins with enter, update, and exit transitions to animate apples being eaten, a lemon replacing an apple, and the removal of a selected apple. The `fruitBowl` module leverages `scaleOrdinal` for color and radius mapping, and `.on('click')` handlers trigger re-renders with updated fruit data.

JJonathan Phelps
95% match
Loading thumbnail…

Bowl of Fruit - Click to Select

Five fruit circles render in an SVG, starting as apples that shrink away, change to lemons, and are removed. Clicking any fruit selects it, highlighting it with a black outline. Updates use D3 v5 data joins with `enter`, `merge`, and `exit`, relying on ordinal scales for color and radius. All position and size changes animate over one second via `transition().duration(1000)`.

ZZ-Richard
95% match
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
95% match
Loading thumbnail…

Bowl of Fruit - Click to select

Five fruit circles sit in a row and animate with color and size changes when apples are eaten or replaced by lemons. Clicking a fruit selects it with a black outline, re-rendering the chart. Using d3 v6 with SVG and transitions, the code employs scaleOrdinal for color and radius mapping, data joins with enter/merge/exit, and transition.attr for animated updates.

SShuyu Zheng
95% match
Loading thumbnail…

Bowl of Fruit Click to select

Five apples and lemons are rendered as color-coded circles in an SVG bowl, with clicks selecting a fruit by highlighting its stroke. The visualization animates fruit removal, type changes, and reordering using D3 v5’s data join and `transition().duration()` for resizing radii. Positions are set via a simple index-based scale, with ordinal scales mapping fruit types to colors and sizes.

Ggilbster
95% match