Skip to main content
SimilarExport ZIP
100%

Bowl of Fruit - Click to Select

✓ Published1🌍 Public
MMichał Szumnarski
Last edited Aug 3, 2019
Created on Aug 3, 2019

Five fruit circles appear in a row, and clicking one selects it with a thick black stroke. Over time, apples are removed, and one apple transforms into a lemon with a yellow color and smaller radius. The example uses D3 v5’s data join with a `key` function and `transition` methods to animate enter, update, and exit states. It also uses `scaleOrdinal` for color and radius mappings and SVG circles for rendering.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Bowl of Fruit - Click to Select

Five circles represent apples in a row, transitioning in size and color as a lemon replaces one apple and fruits are removed. Clicking a fruit toggles its black outline to mark it selected. The example uses d3 v5 selections with data joins, `scaleOrdinal` for color, radius, and stroke, and chained `transition` calls to animate enter, update, and exit states over one-second durations.

CCalvin Gomez
97% match
Loading thumbnail…

Bowl of Fruit - Click to Select

Five fruit circles appear in a row, with apples in red and one lemon in yellow, rendered as an SVG. Clicking any fruit highlights it with a black stroke to mark it as selected. The example uses D3 v5’s data join, `scaleOrdinal` for color and radius, and `transition` to animate enter, update, and exit states. Each fruit carries a random ID, and timed actions remove fruits or change an apple to a lemon.

AAmol Kulkarni
97% 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 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
96% match
Loading thumbnail…

Bowl of Fruit - Click to Select

Five fruit circles enter as apples with a radius of zero, then grow into place while a black stroke marks clicked selections. Using d3 v5’s data join with object constancy, the fruitBowl module renders SVG circles and animates enter, update, and exit transitions via `transition().duration(1000)`. A sequential script eats apples and replaces one with a lemon, demonstrating ordinal color and radius scales. Clicking toggles a fruit’s selection state, re-rendering with updated strokes.

NNikkor
96% match
Loading thumbnail…

Bowl of Fruit - click to select

Five fruit circles appear in a row, each clickable to select it with a black stroke. Animate with d3 v5 transitions, the bowl updates over time as apples are eaten or replaced by lemons. The code uses `scaleOrdinal` for color and radius, binds data by `id`, and implements enter, update, and exit selections with SVG circles.

Ggregosaure
96% match
Loading thumbnail…

Bowl of Fruit - Click to select

Five circles representing apples and lemons transition in size as the data updates, with click selection highlighting the chosen fruit with a black stroke. The D3.js v5 code uses a data join with enter, update, and exit selections, applying ordinal scales for color and radius. A one-second transition animates circle radius and x-position changes, while a timer updates the array by removing and modifying fruit types.

Hhugomell
96% match
Loading thumbnail…

bowl of fruit-click to select

Five circles representing apples appear in a row and animate into place, with a black outline highlighting the selected fruit. The data join in d3.v5 handles entering, updating, and exiting circles through transitions, as apples are removed, replaced with a lemon, and filtered over time. Clicking a circle triggers a re-render via the `fruitbowl` module, which uses `scaleOrdinal` for color and radius mapping, while SVG transitions animate the changes.

Ssingularity6033
96% match