Skip to main content
SimilarExport ZIP
100%

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

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

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.

AI-generated description

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

MIT Licensed

Similar vizzes

Loading thumbnail…

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

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.

Rrenenadorp
94% match
Loading thumbnail…

D3 Bowl of Fruit - Hover to Select

A dynamic scatterplot of fruit items animates apples and lemons as circles, with hover selecting a fruit and highlighting it with a black outline. The D3 version 5 example uses the `select` and `range` functions to manage an SVG, while `scaleOrdinal` maps fruit types to colors and radii. The `fruitBowl` module handles enter, update, and exit transitions via `transition().duration(1000)`, animating circle radius and position over time. Data changes occur through timed calls that pop, mutate, push, and filter the fruit array.

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

Bowl of fruit : Hover to select

Interactive fruit bowl shows a row of apples and lemons rendered as SVG circles, where hovering highlights a fruit with a black outline. The example uses D3 v5’s data join with `merge` and `exit` to animate size and position changes via `transition`. Color and radius are mapped by fruit type using `scaleOrdinal`, while mouseover and mouseout events update a selected fruit ID, re-rendering the visualization.

TTomisin Owolabi
91% match
Loading thumbnail…

Bowl of Fruit - Hover to select

A fruit bowl visualization displays apples and lemons as colored circles. Hovering over a fruit highlights it with a black stroke, and the selection is cleared on mouseout. The code uses D3.js v6 with `scaleOrdinal` for color and radius mapping. Circle positions and radii animate via `transition().duration(1000)`, with enter and exit transitions growing or shrinking circles. The data, generated randomly, is updated through timeouts that remove or reassign fruit types, demonstrating dynamic SVG updates.

SShuyu Zheng
91% match
Loading thumbnail…

Bowl of Fruit - Hover to select

Five pieces of fruit sit in a row as circles colored by type, either red apples or yellow lemons. Hovering over a fruit outlines it in black while the mouse is over it. Using d3 transitions with `attr` tweening, fruits animate in and out by scaling their radius, while updates such as removal or type change occur on a timer. The code uses `d3.select`, `scaleOrdinal`, and data joins with `.enter()`, `.merge()`, and `.exit()`.

NNikki-gea
90% match
Loading thumbnail…

Bowl of fruits- Hover to Select

Five circles represent fruits in a bowl using an ordinal color scale for apples and lemons, with hover interactions selecting a fruit by adding a black stroke. The visualization demonstrates data joins in D3 v5, where entering circles animate from radius zero, updated fruits transition to new positions and types, and exiting circles shrink away. Population data from a CSV file is not displayed in this code, which instead focuses on the `selection.data`, `transition`, and mouse event patterns in a reusable `fruitBowl` function.

KKazushige Okuma
90% match