Skip to main content
SimilarExport ZIP
100%

Bowl of Fruit-Click to Select

✓ Published1🌍 Public
XX. N. Chu
Last edited Jun 22, 2020
Created on Jun 22, 2020

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.

AI-generated description

Demonstrates fundamental DOM manipulation using D3.js by making a smiley face whose eyebrows move.

MIT Licensed

Similar vizzes

Loading thumbnail…

Bowl of fruit click to select

A bowl of fruit demonstrates interactive selection and data-driven updates with D3.js. Five apples render as circles in an SVG, and clicking any fruit selects it with a black stroke. The code uses `scaleOrdinal` for color and radius mappings, while `selection.enter`, `merge`, and `exit` manage dynamic updates as fruits are removed or change type. Transitions animate position and size changes over one second. A click handler triggers re-rendering to highlight the selected fruit.

MMatan
96% match
Loading thumbnail…

Bowl of Fruit - Click to Select

Five fruit circles appear in a row, each initially an apple that can be clicked to select it with a black outline. The visualization uses d3 data joins with enter, merge, and exit transitions to animate circles growing, shrinking, and changing color as apples are eaten or replaced with lemons over timed intervals. The fruitBowl function leverages d3.scaleOrdinal for color and radius mapping, while click handlers update the selected fruit state to trigger re-renders.

HHelenaShu
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

A bowl of fruit visualization demonstrates animated selection and data updates. Five circles representing apples and lemons move horizontally, with the selected fruit highlighted by a black stroke. The view uses d3.select and d3.range to generate initial data, with scaleOrdinal mapping fruit types to colors and radii. Fruit removal, type changes, and interactive clicking trigger transitions via d3.transition().duration, animating circle positions and sizes over one-second intervals. The implementation uses React, SVG rendering, and D3 v5.

Jjeelong
95% match
Loading thumbnail…

Bowl of fruits - click to select

A bowl of fruits demonstrates interactive data selection and dynamic updates in D3. Apples and lemons are rendered as colored circles with labels, and clicking a fruit selects it, highlighting it with a black stroke. The visualization uses D3's data joins with enter, update, and exit selections to animate fruits appearing, disappearing, and changing type over time via transitions. It employs ordinal scales for color and radius, SVG groups for fruit elements, and click event handlers to update the selected state.

Aarieltonglet
95% match
Loading thumbnail…

Bowl of Fruits - Click to Select

A bowl of fruit displays apples and lemons as colored circles, with the currently selected fruit highlighted by a black outline. Clicking any fruit triggers a transition that animates its radius and position, while removed fruits shrink and exit. The example uses D3 v5’s data joins with `selection.enter`, `merge`, and `exit` methods, alongside `scaleOrdinal` for color and size, and `transition.duration` for smooth animations. The `fruitBowl.js` module manages the interactive selection logic, while `index.html` loads the SVG container and D3 bundle.

YYasara Peiris
95% match
Loading thumbnail…

Bowl of fruit - Click to select

A bowl of fruit visualization displays five apples as colored circles, which can be clicked to select. The selection enlarges the chosen fruit, and over time apples are removed or replaced with lemons, with animations transitioning circle radii. The example uses d3 v5 with the `scaleOrdinal` color and radius scales, and shows enter, merge, and exit transitions via `transition().duration()`. The SVG rendering is updated through a `fruitBowl` function that handles click events and data changes.

MMaciek Sitkowski
95% 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
95% match