Fork of Bowl of Fruit - Hover to Select

100%

Fork of Bowl of Fruit - Hover to Select

✓ Published0🌍 Public

Last edited Oct 14, 2021

Created on Oct 14, 2021

Forked from Bowl of Fruit - Hover to Select

Five circles represent apples in an SVG bowl, rendered with d3 v5 via the `fruitBowl` module. Hovering an apple selects it with a black stroke, using `mouseover` and `mouseout` events that call `setSelectedFruit`. The `scaleOrdinal` color and radius scales map fruit types to red or yellow and sizes. Animated `transition` calls adjust circle positions and radii over one second, while `exit` transitions shrink removed fruits; timers replace an apple with a lemon and remove fruits.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Bowl of fruit - hover to select

A bowl of five apples rendered as SVG circles animates through data updates, with hover interactions selecting a fruit by adding a black stroke. The visualization demonstrates D3 v5’s join pattern using `selection.data`, `enter`, `merge`, and `exit` transitions, with `scaleOrdinal` mapping fruit types to colors and radii. Hovering triggers a callback to update the selected fruit, while timed actions sequentially remove fruits and replace one apple with a lemon, causing smooth radius and position transitions over one-second durations.

TTimothy sit

95% match

Loading thumbnail…

Fork of Fork of Fork of Bowl of fruit - Hovering to Select D3.js!

Five fruit circles, apples and lemons, render in an SVG bowl using D3 v5’s data join pattern. Hovering over a circle selects it, applying a black stroke via the `mouseover` and `mouseout` handlers. The `scaleOrdinal` color and radius scales map fruit types, while entering and exiting circles animate radius changes with `transition().duration(1000)`. A `setSelectedFruit` callback triggers re-renders, demonstrating animated updates as fruits are removed or replaced over time.

CCarloWK1202

95% match

Loading thumbnail…

Fork of Bowl of Fruit - Hover to Select

A bowl of fruit rendered as five red apples animates as they are eaten and replaced by a lemon, while hovering over any fruit highlights it with a black outline. The example uses d3-selection’s data join and transitions to smoothly shrink and remove exiting circles, update fruit types, and re-render on mouseover and mouseout events. The fruit bowl is built with SVG circles, with colors and radii assigned via d3.scaleOrdinal, and state management handled through a custom render function in plain JavaScript.

Jjlspangl

95% match

Loading thumbnail…

Fork of Fork of Bowl of Fruit - Hover to Select

Using D3 v5, this visualization displays a row of five apples as colored circles that animate in size and position. Hovering over any fruit highlights it with a black stroke and clears the selection on mouseout. The code uses `scaleOrdinal` for color and radius, `transition().duration()`, and a data join with `enter`, `merge`, and `exit`. Over time, `setTimeout` calls remove apples or change one to a lemon, demonstrating animated updates to the SVG scene.

Ggharakhani1986

94% match

Loading thumbnail…

Fork of Bowl of fruit - Hover to select

This example shows a bowl of five fruit represented as animated SVG circles. Each circle is colored and sized by its type—apples are red and large, lemons are yellow and small—using `d3.scaleOrdinal` for both color and radius. The visualization responds to user clicks: clicking a fruit highlights it with a black outline, and the fruit bowl changes over time as fruits are removed or replaced. The animation uses D3 v6 transitions to shrink exiting fruits and grow entering ones.

MMajaha21

94% match

Loading thumbnail…

Bowl of Fruit - Hover to Select

A bowl of fruit rendered as SVG circles transitions between five apples, shrinking to four after one second, then swapping a lemon into place, and finally removing another apple. Hovering over any fruit selects it with a black outline, and moving the mouse away deselects it. The example uses D3 v6 with a selection-join pattern, `scaleOrdinal` for color and radius, and `transition().duration(1000)` to animate circle positions and radii. State changes are triggered by `setTimeout` calls, while mouseover and mouseout events update the selected fruit via a callback.

EEllednera

94% match

Loading thumbnail…

Bowl of Fruit - Hover to select

Five apples and a lemon are rendered as colored circles in an SVG bowl, with hover highlighting the selected fruit with a black outline. The example demonstrates enter, update, and exit selections, animating radius and position changes over one-second transitions. Built with D3 v5, it uses `scaleOrdinal` for color and size, `selection.merge`, and `transition` to handle dynamic data updates as fruits are eaten and replaced.

Rrintisch

94% match

Loading thumbnail…

Bowl of Fruit - Hover to select

Five circles, apples and a lemon, render in an SVG bowl and animate their positions and radii with d3 transitions. Hovering a fruit selects it, drawing a black stroke via d3’s selection.on and a scaleOrdinal color scale. The data updates through setTimeout calls that remove apples or replace one with a lemon, with exit transitions shrinking removed circles. The code uses d3.v5’s select, range, and merge for enter-update-exit patterns.

SSophia Murage

94% match