interactions

100%

✓ Published1🌍 Public

Last edited Nov 1, 2019

Created on Nov 1, 2019

Five fruit shapes render as SVG circles with color and radius scales mapping apple and lemon types. The d3.v5 fruitBowl module transitions new and exiting circles, while click events update a selected fruit’s blue stroke. Timed mutations remove and modify fruits, demonstrating animated binds through `selection.merge` and `transition.duration`.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Bowl of Fruit - Interactions

Five apples transition in and out of an SVG bowl over timed intervals, with an apple morphing into a lemon mid-sequence. Hovering or clicking a fruit highlights it with a colored outline, and the selection animates as fruits are added or removed. Using D3 v5's data join, enter, update, and exit selections, each circle's radius and fill map through ordinal scales. Interactions trigger a card-based render cycle, while `transition().duration(1000)` animates position and radius changes.

Ssherryyx

90% match

Loading thumbnail…

Bowl of Fruit - click select

Five fruit circles render in an SVG as a bowl of apples and lemons, with click selection to highlight a fruit with a black outline. The example demonstrates data joins and transitions using D3 v5, with circles entering, exiting, and updating via `selection.data`, `transition.attr`, and a custom `fruitBowl` module. Color and radius scales map fruit types to visual properties, while timed actions remove, replace, and filter the underlying array to animate changes.

AAndrew Fletcher

89% match

Loading thumbnail…

Bowl of Fruit: Click to Select

A bowl of fruit demonstrates click-to-select interactions with animated enter, update, and exit transitions. Five apples render as scaled SVG circles via a custom `fruitBowl` module, which uses `scaleOrdinal` for color and radius mappings. Clicking a fruit triggers an `onClick` handler that updates a `selectedFruit` identifier, applying a black stroke highlight. Timed updates replace an apple with a lemon, remove fruits, and re-render using `transition().duration(1000)` with `merge` and `remove` on circle selections.

Bbprokopowicz

88% match

Loading thumbnail…

Bowl of Fruit, Interaction click

Five apples appear in a row, and clicking one outlines it in black. As time passes, apples are removed and one changes into a lemon, with new and exiting circles animating their radius. The example demonstrates the D3 general update pattern using `selection.data`, `enter`, `merge`, and `exit` transitions. Fruit types map to colors and sizes via `scaleOrdinal`, and click events trigger a re-render with a selected fruit ID. SVG circles animate over one second using `transition().duration(1000)`.

AAli Ahmed

88% match

Loading thumbnail…

Bowl of Fruit - Interaction(Click to Select)

Five circles representing apples enter an SVG bowl, then shrink away or morph into a lemon through scripted timeouts while a click selects a fruit with a black stroke. The example uses d3 v5’s data join, scaleOrdinal for color and radius, and transition().duration(1000) to animate enter, update, and exit states. A click event triggers a re-render, updating the selected fruit’s stroke.

MMinwoo Pak

88% match

Loading thumbnail…

Bowl of Fruit - Click to Select

A bowl of five apples renders as SVG circles, and clicking a fruit selects it with a black stroke. The example demonstrates data joins and transitions in D3 v7: apples shrink and vanish when eaten, and one apple is replaced by a lemon after two seconds, updating its fill and radius. The fruitBowl module uses `selection.enter`, `selection.exit`, and `transition.attrTween` to animate circle radii and positions, while a `scaleOrdinal` maps fruit types to colors and sizes. Click events trigger a re-render, highlighting the selected fruit.

TToooooooT

88% match

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

88% match

Loading thumbnail…

Bowl of fruit

Five fruit shapes sit in a row as SVG circles and labels, using d3.scaleOrdinal to map apple and lemon types to distinct radii and colors. Clicking a fruit highlights it with a black stroke. Over time, d3 transitions remove fruits, change an apple into a lemon, and filter out another, demonstrating data joins with enter, update, and exit selections.

AAbishek-Dulal

88% match