Skip to main content
SimilarExport ZIP
100%

Bowl of fruit click to select

✓ Published1🌍 Public
MMatan
Last edited Nov 10, 2020
Created on Nov 10, 2020

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.

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

Bowl of Fruit - Click to Select

A bowl of fruit demonstrates D3.js data joins and interactive selection. Five apples render as circles that transition in size and position over time, with one apple morphing into a lemon and others disappearing. Clicking any fruit highlights it with a black stroke. The code uses `selection.data`, `enter`, `merge`, and `exit` with `transition.attr` to animate SVG circles, plus `scaleOrdinal` for color and radius mappings.

AArriannePandaraoan
95% match
Loading thumbnail…

Bowl Of Fruits-ClickToSelect

A bowl of fruit demonstrates click-to-select interaction and dynamic data updates using D3.js. Circles represent apples and lemons, with a black stroke highlighting the selected fruit. The visualization animates transitions when fruits are removed or change type, using D3's `scaleOrdinal` for colors and radii, and `selection.transition()` for smooth updates. The code employs `selectAll`, `data`, `enter`, `merge`, and `exit` patterns to manage DOM elements, with click handlers triggering re-renders via an `onClick` callback.

MMahaveer Jain
95% match
Loading thumbnail…

Bowl of Fruit — Click to Select

A bowl of fruit shows five apples arranged in a row, with clickable selection that outlines the chosen fruit in black. The D3 v5 code uses `scaleOrdinal` for both color and radius mapping, and `selectAll`, `merge`, and `transition().duration()` to smoothly animate circles entering, updating, and exiting. Over time, fruits are removed or change type from apple to lemon, demonstrating dynamic data updates in an SVG animation.

MMuhammad Jarir Kanji
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
94% match
Loading thumbnail…

Bowl of Fruit-Click to Select.js

An interactive fruit bowl displays apples and lemons as colored circles, with a single click selecting a fruit and highlighting it with a black stroke. The visualization uses d3-scale's `scaleOrdinal` to map fruit types to colors and radii, while d3-transition animates circle entry, exit, and position changes over one second. d3-selection handles data joins and click events, and the code demonstrates dynamic updates through timed mutations that remove fruits or change an apple to a lemon.

NNeepaB
94% match
Loading thumbnail…

Bowl of Fruit - Click to select

This example presents a bowl of fruit where apples and lemons animate their size and color as the dataset updates. A user can click any fruit to select it, which adds a black stroke. The D3 v5 code uses `scaleOrdinal` for color and radius mappings, and applies transitions to smoothly animate entering, exiting, and resizing circles. Array mutations (removing or altering fruit) trigger re-renders, demonstrating dynamic data binding with click-driven selection.

SSimon Pettersson
94% match
Loading thumbnail…

Bowl of Fruit - Click to Select

A bowl of fruit demonstrates a click-to-select interaction with animated transitions. Apples and lemons render as colored circles using D3 v5's `scaleOrdinal` for color and radius, with smooth 1-second transitions on enter, update, and exit. Users click a fruit to highlight its selection with a black stroke. The code uses `selection.data`, `merge`, and `transition` to animate changes, while a script removes, replaces, and reorders fruits over time to show dynamic updates.

YYF
94% match