Skip to main content
SimilarExport ZIP
100%

D3 Course Code Along - Bowl of fruit: Click to select

✓ Published1🌍 Public
Rrenenadorp
Last edited Jun 17, 2020
Created on Jun 17, 2020

A bowl of fruit demonstrates click-to-select interactions, where apples and lemons appear as colored circles that change position and stroke color when clicked. The visualization updates over time as fruits are removed or transformed, using D3's data join with object constancy via randomized IDs. The code relies on d3-selection, d3-scaleOrdinal for color mapping, and transition methods to animate enter, update, and exit states, rendering SVG elements within a bowl-shaped rect.

AI-generated description

https://www.youtube.com/watch?v=_8V5o2UHG0E

MIT Licensed

Similar vizzes

Loading thumbnail…

D3 Course Code Along - Bowl of fruit: Hover to select

A bowl of fruit renders as a row of red apples and yellow lemons in an SVG graphic. Hovering over a fruit highlights it with a blue outline, demonstrating interactive selection. The visualization uses D3 v5 with data joins and transitions to animate fruits entering, exiting, and changing type. The code applies `scaleOrdinal` for color mapping and `transition` with `attr` tweening, driven by random IDs for object constancy. Population trend data from CSV files accompanies the fruit demo, though the bowl itself uses generated fruit objects.

Rrenenadorp
94% match
Loading thumbnail…

Bowl of Fruit - click to select

A bowl of fruit demonstrates D3’s data-join with animated transitions, where apples and lemons are drawn as circles and clicking a fruit highlights it with a black stroke. The example uses `d3.scaleOrdinal` for colors and radii, `selection.transition().duration(1000)` to animate enter and exit, and a custom click handler to update the selected fruit. Rendered in SVG, the scene shows fruits being removed, replaced, and filtered over time.

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

Bowl of Fruit - CLick to select

This interactive D3.js example displays a bowl of fruit as colored circles, where apples render in red and lemons in yellow, with size encoding fruit type. Users can click or hover over a fruit to select it, which adds a black outline around the chosen circle. The visualization uses D3's ordinal scales for color and radius mapping, and animates circle transitions with the `.transition()` API. Data changes over time, automatically removing fruits and swapping an apple for a lemon, demonstrating dynamic updates with enter, merge, and exit states in SVG.

AAaron Goebel
91% 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
91% 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
91% match
Loading thumbnail…

Bowl of Fruit - click to select

D3 update patterns animate a changing bowl of fruit, where clicking a piece selects it with a black stroke. Apples and lemons are drawn as SVG circles and labeled with text using a `scaleOrdinal` color and radius scale. The code uses D3 v5 selection joins with keyed data, `transition().duration(1000)`, and exit/enter animations to smoothly resize, add, and remove fruit.

Lliyaxuanliyaxuan
91% match