Bowl of fruit - Hover to select

100%

Bowl of fruit - Hover to select

✓ Published0🌍 Public

Last edited Mar 28, 2020

Created on Mar 28, 2020

Forked from Bowl of fruit - Click to select

Five fruit circles sit in a row, styled as apples and lemons with red and yellow fills via `d3.scaleOrdinal`. Hovering highlights a fruit with a black stroke, calling `setSelectedFruit` on `mouseover` and clearing it on `mouseout`. Removal, replacement, and type changes are animated with `transition().duration(1000)` on `r` and `cx`, using data joins in `d3.selection`. The SVG is rendered with D3 v5, with fruit size determined by a second ordinal scale.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Bowl of Fruit, Hover to Select

Five fruit circles sit in a row, transitioning between apples and lemons with hover selection. D3 v5’s data join and ordinal scales for color and radius drive the SVG circles, while `selection.on("mouseover")` and `selection.on("mouseout")` update a selected fruit’s stroke. Enter, merge, and exit transitions animate radii over one second, with fruits added, removed, or replaced via timed data mutations.

Ccledevoute

96% match

Loading thumbnail…

Bowl of Fruit - Hover to select

Five pieces of fruit sit in a row on an SVG canvas, rendered as colored circles whose radius and fill depend on fruit type via `d3.scaleOrdinal`. Hovering a circle triggers a `mouseover` event that calls `setSelectedFruit`, updating a black stroke to highlight the selection. Animations use `selection.transition()` with a 1000-millisecond duration to smoothly move, resize, or remove circles when the data array changes over time. The code imports `scaleOrdinal` from D3 v5 and uses a data join with keyed functions to manage enter, update, and exit selections.

SSimon Pettersson

96% match

Loading thumbnail…

Bowl of Fruit - Hover to Select

Five fruit circles in a bowl render as apples and lemons across an SVG canvas. Hovering over a fruit selects it, drawing a black stroke around it, while moving the mouse away deselects it. The example uses d3’s data join with enter, update, and exit selections, and d3-transition’s `transition().duration()` to animate circle radius and position changes over one second. `d3.scaleOrdinal` maps fruit types to colors and sizes.

WWarren-Fitzhenry

96% match

Loading thumbnail…

Bowl of fruit - Hover to select

Five fruit circles initially render as apples via an ordinal color scale and size scale, then update through d3 transitions when the data changes—removing a fruit, converting one to a lemon, and filtering another. Hovering a circle triggers `mouseover` and `mouseout` events that call `setSelectedFruit`, toggling a black stroke on the selected fruit. The visualization uses D3 v5's data joins, `selection.enter`, `merge`, `exit`, and `transition` APIs to animate the SVG elements.

DDaniel García

96% match

Loading thumbnail…

Bowl of Fruit hover to select

Five fruit circles render in an SVG, with apples as large red circles and lemons as smaller yellow ones. Hovering over a fruit highlights it with a grey outline, and moving the mouse away removes the highlight. The example demonstrates data joins and transitions using d3-selection and `transition.attrTween`, with `scaleOrdinal` from d3-scale mapping fruit types to colors and radii. Timed updates add, remove, and change fruit types, animating circle radius and position changes over one second.

Ggilbster

96% match

Loading thumbnail…

Bowl Fruit - Hover to select

Five pieces of fruit in a bowl animate between apples and lemons while responding to hover. D3 v5’s `scaleOrdinal` maps fruit types to colors and radii, and `selection.join` patterns with `transition` handle enter, update, and exit states. Circle elements grow from radius zero and shrink on removal, with an animated swap from apple to lemon. A black stroke highlights the selected fruit via mouseover events that update a `selectedFruit` variable, triggering a re-render. The example uses plain SVG circles and D3 transitions over one second.

JJefferson Abreu

96% match

Loading thumbnail…

Bowl of fruit - Hover to select

Five fruit icons sit in a row over a time-based sequence: apples are eaten, one apple transforms into a lemon, and hovering highlights the selected fruit with a black outline. The D3 v5 example uses `scaleOrdinal` for color and radius mappings, `selection.selectAll` to bind data, and chained `.transition().duration(1000)` to animate radius changes. SVG circles and text labels render via a reactive `fruitBowl` function, while `setSelectedFruit` toggles stroke on hover, with `setTimeout` scheduling the fruit mutations.

MMartin Christensen

95% match

Loading thumbnail…

Bowl of Fruit - Hover to Select.js

Five fruit circles sit in a beige bowl, rendered as SVG rectangles and circles. Hovering over a fruit highlights it with a black stroke, and the selection updates state before smoothly transitioning the circles to new positions and radii. The example uses d3-selection, d3-scaleOrdinal, and d3-transition to animate fruit removal and type changes from apple to lemon, driven by timed mutations of the data array.

Dddperdue

95% match