Skip to main content
SimilarExport ZIP
100%

Bowl of fruit - Event Handlers

✓ Published0🌍 Public
Ssploitfun
Last edited May 7, 2020
Created on May 7, 2020

A bowl-shaped outline holds a row of five apples rendered as red circles, which users can hover over to highlight with a black stroke. The example demonstrates D3 v5 data joins with enter, update, and exit selections, using `scaleOrdinal` for color and radius mapping. Over timed intervals, apples are removed, one becomes a lemon, and another is filtered out via key-based data binding, while mouseover and mouseout event handlers trigger `setSelectedCircle` to update the selection state.

AI-generated description
MIT Licensed

Similar vizzes

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 row of fruit circles appears, initially five red apples, and the user can hover over any fruit to select it, which highlights it with a black stroke. The visualization demonstrates animated updates to a data join: one apple is removed, a second apple changes into a lemon, and a third fruit is filtered out, all with smooth transitions using D3 v5’s `transition().duration(1000)`. The code uses `d3.scaleOrdinal` for color and radius, and `selection.data` with a key function, along with `mouseover` and `mouseout` event handlers to manage selection state.

NNaveenaS12
92% match
Loading thumbnail…

Bowl of fruit - click to select

A bowl of fruit displays five apples as red circles, which users can click to highlight with a black stroke. Over time, apples disappear and one transforms into a lemon, demonstrating dynamic data updates. The visualization uses D3 v5 with a modular import of `scaleOrdinal` for color and radius scales, while `select`, `range`, and `transition` handle SVG circle creation, removal, and animated resizing. Selection state triggers re-rendering via a callback, showcasing enter, update, and exit patterns.

HHasideluxe
92% match
Loading thumbnail…

Bowl of Fruit - Hover to Select

Five apples sit in a bowl, rendered as red circles with labels; hovering over a fruit highlights it with a black stroke, and selecting triggers updates. Over three seconds, the data changes: an apple is eaten, one becomes a yellow lemon, and another is removed, showing animated transitions. Built with d3 v5, it uses selection joins, `scaleOrdinal` for color and radius, and SVG circles, rects, and text elements within a single `<g>` per fruit.

MMiish84
92% match
Loading thumbnail…

Bowl of Fruit - Click to select

A bowl of fruit demonstrates animated data joins in D3 v6. Five apples appear as red circles, with a black stroke highlighting the currently selected fruit after a click. Over time, apples are removed, one apple transforms into a lemon, and the remaining selection is filtered. The example uses `d3.scaleOrdinal` for colors and radii, `selection.data` with key functions, `transition` for smooth enter/exit animations, and event handlers to manage selection state.

OOleg
92% match
Loading thumbnail…

bowl of fruit-hover to select

Five circles initially render as apples in a red-to-yellow color scale, with hover events highlighting the selected fruit via a black stroke. Using d3.v5 data joins and transitions, the example animates circle radius and position changes while updating the selection state through callbacks. Over sequential timeouts, the visualization removes fruits and mutates an apple into a lemon, demonstrating enter, update, and exit selections with d3.scaleOrdinal for color and radius values.

Ssingularity6033
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 - Click to select

Five circles representing apples appear in a row and can be clicked to select one, which gains a black outline. Over time, one apple is removed and another transforms into a lemon, changing its color and size, while a third apple disappears. Using D3 v5, the chart binds SVG groups to data, applies ordinal scales for color and radius, and animates radius changes via `transition`. A click event updates the selected fruit, triggering a re-render with the `fruitBowl` function.

MMartin Christensen
91% match