Skip to main content
SimilarExport ZIP
100%

Bowl of Fruit-interaction

✓ Published1🌍 Public
SSagar Malviya
Last edited Jun 2, 2019
Created on Jun 2, 2019

A small set of fruit circles sits in a bowl, highlighting an active fruit with a black stroke when clicked. The code uses d3 data joins to update the scene, removing a fruit, replacing one apple with a lemon, and re-rendering at timed intervals. The fruitBowl function applies d3 scaleOrdinal for color and radius, and SVG groups translate each circle and label into position. Click events trigger a state update that re-renders with the new selection highlighted.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Bowl of Fruit - Click to Select

Five fruit circles render in an SVG bowl, transitioning in size and position as apples are removed or swapped for lemons over timed intervals. Clicking a circle selects it, drawing a black stroke around the chosen fruit; the code tracks the selected ID and re-renders via `fruitBowl`. It uses `d3.scaleOrdinal` for color and radius mapping, `selection.merge` for updating entered and existing nodes, and `transition.attr` for animated enter, update, and exit states.

JJames Barbour, Jr.
93% match
Loading thumbnail…

Bowl of Fruit - Click to Select

Five fruit circles enter as apples, with two later replaced by a lemon or removed entirely, demonstrating D3's data join. Clicking any fruit toggles a dark blue selection stroke, triggering a re-render via the `fruitBowl` module. The code uses `d3.scaleOrdinal` for color and radius, `selection.merge`, and `transition` for animated position and size changes over one second. SVG rendering with `d3.select` and `setTimeout` drives the scripted state updates.

RRubens
92% match
Loading thumbnail…

Bowl of Fruit - Click to Select

Five pieces of fruit sit in a row inside an SVG bowl; clicking a fruit highlights its outline in black. The view updates when a piece is removed or one apple changes into a lemon. The code uses D3 v5 with a data join, `scaleOrdinal` for color and radius, and chained `transition()` calls to animate entering, exiting, and resizing circles. Clicking triggers a callback that re-renders the bowl via the exported `fruitBowl` function.

Ffernandotsurukawa
92% match
Loading thumbnail…

Bowl of Fruit - Click to Select

A set of fruit shapes animate into a bowl using SVG circles. Each fruit is rendered with a color and radius determined by its type via `d3.scaleOrdinal`, with apples appearing red and larger, lemons yellow and smaller. Clicking a fruit selects it, applying a black stroke, and triggers a callback that re-renders the visualization. The example demonstrates the D3 general update pattern: new fruits enter with a 2-second radius animation, exiting fruits shrink away over 1 second, and changes to existing fruit types update smoothly through the merged enter/update selection.

Rrebeccayc
92% 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
92% 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
92% match
Loading thumbnail…

Bowl of Fruit (Click to Select)

Circles representing apples and lemons animate into a bowl-like row, with each fruit shrinking or disappearing as data updates over timed intervals. Clicking any circle selects it, highlighting its stroke in black. The example uses D3 v6 with `scaleOrdinal` for color and radius mapping, and combines enter, merge, and exit selections with 1000ms transitions. SVG rendering and click handlers drive the interactive state changes.

BBKirst3
92% match
Loading thumbnail…

Bowl of Fruit -Click to Select

Five fruit circles appear as apples in a bowl and animate with zero-to-full scaling using D3 v5 data joins. Clicking a fruit selects it with a black outline, identified through a selectedFruit ID. The fruitBowl function uses scaleOrdinal for colors and radii, with enter, update, and exit selections handling transitions, while a timer script mutates the fruits array to replace a fruit with a lemon and remove others.

MMunTatt Yap
92% match