Skip to main content
SimilarExport ZIP
100%

Bowl of Fruit - Click to Select

✓ Published1🌍 Public
JJordan Chiu
Last edited Jan 27, 2020
Created on Jan 27, 2020

Five pieces of fruit sit in an animated bowl, rendered as circles whose radius and fill come from d3.scaleOrdinal based on fruit type. Clicking an apple or lemon triggers an onClick handler that sets the selected fruit, which receives a thick black stroke via a data join and transition. The example also demonstrates enter, update, and exit selections by removing apples and changing one apple to a lemon at timed intervals, all using d3.transition for smooth radius and position animations.

AI-generated description

Tutorial!

MIT Licensed

Similar vizzes

Loading thumbnail…

Bowl of Fruit - Click to Select

Five fruit circles animate between a bowl arrangement and removal, with each apple and lemon rendered as an SVG circle. The d3.js code uses a shared fruitBowl function with a click handler to highlight the selected fruit with a black stroke. Transitions employ the D3 update pattern with enter, merge, and exit selections to smoothly animate radius and position changes over one-second durations. The colorScale and radiusScale ordinals map fruit types to their visual properties.

MMukund Khandelwal
96% match
Loading thumbnail…

Bowl of Fruit - Click to Select

Five circles representing fruit animate into a bowl. Clicking a fruit selects it, giving it a black outline, and a sequence of timed updates replaces an apple with a lemon, removes fruits, and pops one. Built with D3 v5, it uses `selection.transition().duration()` for SVG circle animations, `scaleOrdinal` to map the types 'apple' and 'lemon' to colors and radii, and a click handler to update the `selectedFruit` state, all driven by a render function.

Ccyro666
96% match
Loading thumbnail…

Bowl of Fruit Click to Select

Five apples appear in a bowl, rendered as circles using the D3.js v7 library. A click on any fruit selects it, shown with a black stroke, and triggers a transition. Over time, the example programmatically removes apples and changes one apple into a lemon, with `transition().duration(1000)` animating the changes in radius and position using ordinal scales for color and size. The code uses D3 data joins with `enter`, `merge`, and `exit` selections.

Ggabrielribeirob
96% match
Loading thumbnail…

Bowl of fruit - click to select

Five pieces of fruit sit in a bowl, rendered as SVG circles with varying radii and colors via d3.scaleOrdinal. Clicking a fruit selects it, highlighting the chosen item with a black stroke. D3's data join and transition system animate the fruits' positions and sizes as apples are removed, replaced by a lemon, or filtered over time.

WWhitney Hung
96% match
Loading thumbnail…

Bowl of Fruit - Click to Select

A bowl of five apples is rendered as SVG circles; clicking any fruit selects it with a black stroke, while the remaining fruit animate into position over one second. The example demonstrates enter, update, and exit selections with `d3.selectAll` and `transition`, using `scaleOrdinal` for color and radius by fruit type. As timers fire, apples are removed, and one apple transforms into a lemon. The `fruitBowl` function handles click events via an `onClick` callback, and `d3.v6` powers the data joins.

EEllednera
96% match
Loading thumbnail…

Bowl of Fruit - Click to select

Five pieces of fruit sit in a bowl, where clicking an item selects it with a black outline. The bowl updates over time as fruits are removed and one apple changes into a lemon, with transitions animating position and radius. Built with D3 v5, the example uses `scaleOrdinal` for color and size, data joins with enter/exit selections, and `transition` for smooth updates.

TThomas Seberechts
95% match
Loading thumbnail…

Bowl of Fruit - click to select 1

Five fruit circles animate into a bowl, each colored by type via a d3.scaleOrdinal, with an apple turning into a lemon halfway through. Clicking a fruit selects it, adding a black stroke to the chosen circle. The visualization shows enter, update, and exit selections with d3 transitions, scaling radius and repositioning circles over one second as fruits are removed or replaced.

Jjblaskovich
95% match
Loading thumbnail…

Bowl of fruit - click to select

Five fruit circles render as apples and a lemon, with an ordinal scale mapping fruit types to colors and radii. Clicking a fruit selects it, drawing a black stroke around that circle, while the join uses d3 transitions to animate enter, update, and exit states. The data array mutates over time to demonstrate keyed joins and animated updates.

IIsmaelHernandezL
95% match