14.c - fruit bowl - hover & click select - dataviz 2018

100%

14.c - fruit bowl - hover & click select - dataviz 2018

✓ Published0🌍 Public

Last edited Jan 13, 2022

Created on Jan 13, 2022

Forked from 14.b - fruit bowl - hover to select - dataviz 2018

Five apples sit in a bowl, selectable by click and hover, with each fruit’s outline changing color to indicate state. The code uses D3 v7’s data join and transition methods to animate fruit radius, position, and label opacity as items are removed or change type. The `renderFruitBowl` function handles enter, update, and exit selections, while `scaleOrdinal` maps fruit types to colors and radii. Apple and lemon labels appear via SVG text elements.

AI-generated description

datraviz 2018 #14.a - fruit bowl - click to select

MIT Licensed

Similar vizzes

Loading thumbnail…

14.b - fruit bowl - hover to select - dataviz 2018

A fruit bowl shows five apples arranged in a shallow dish, and hovering over any fruit highlights it with a black stroke. The visualization uses D3 v7's selection and transition APIs to animate new fruits entering, exiting, and changing type, such as when an apple transforms into a lemon. The code demonstrates enter, update, and exit states using `selectAll`, `merge`, and `transition().duration()`, with interactions driven by `mouseover` and `mouseout` events. All rendering is done in SVG.

Zzach b.

95% match

Loading thumbnail…

14.a - fruit bowl - click to select - dataviz 2018

Five apples and a bowl render as SVG shapes. Clicking a fruit selects it, drawing a black outline. A timelapse removes apples, changes one into a lemon, and removes another, demonstrating D3's enter, update, and exit transitions. The example uses `selection.transition()` for animations, `scaleOrdinal` for colors, and `transition.duration` to animate `attr('r')`, `attr('opacity')`, and transforms.

Zzach b.

94% match

Loading thumbnail…

Bowl of Fruit - hover select

Five apples animate into a row; hovering highlights a fruit with a black outline, and clicking away removes the selection. The code uses D3 v5 with a data join, `scaleOrdinal` for color and radius, and `transition` for entering, updating, and exiting circles. Apples and lemons are represented as SVG circles, with mouseover and mouseout events triggering a selection state that re-renders the bowl.

AAndrew Fletcher

92% match

Loading thumbnail…

Bowl of Fruit - Hover to Select

A bowl of fruit displays five apples that hover to select, with a black stroke highlighting the currently hovered fruit and disappearing on mouseout. The visualization shows fruit entering, exiting, and changing type through animated transitions over time. Using D3 v5 with an SVG rendering approach, the code employs `scaleOrdinal` for color and radius mappings, `selection.enter`, `merge`, and `exit` patterns, and `transition().duration()` to animate circle attributes. Apples are replaced by a lemon mid-animation, and fruits are removed at intervals, demonstrating dynamic data joins.

Wwwwwj

91% match

Loading thumbnail…

click to select!

A fruit bowl animation shows a row of apples that dynamically change through data updates, with click-to-select behavior implied by the title. The SVG visualization uses d3 v5 and a modular fruitBowl function with scaleOrdinal mappings for fruit color and radius. Timeout-driven state changes remove fruits, replace one apple with a lemon, and filter out another, while enter, update, and exit selections handle the transitions using selectAll and data joins.

Eemntd

91% 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

91% match

Loading thumbnail…

Bowl of fruit - hover to select

Five apples in a bowl render as SVG circles whose size and color map to fruit type via `d3.scaleOrdinal`. Hovering over a fruit calls the `setSelectedFruit` prop, redrawing the selection with a black stroke. Using D3 v5 data joins and `transition`, the visualization animates changes over time—removing fruit, replacing an apple with a lemon, and deleting another—while text labels update via `.merge()` on enter/update selections.

WWhitney Hung

91% match

Loading thumbnail…

Bowl of Fruit - Hover to Select

Five apples and a lemon are visualized as colored circles, with hover selection highlighting the fruit under the cursor. The animation uses D3 v5’s selection transition system to grow and shrink circles as fruits are eaten or replaced over time. The code imports `scaleOrdinal` for color and radius mappings, and drives state changes through timed callbacks.

Ccodexmon

91% match