Click to Select

100%

Click to Select

✓ Published0🌍 Public

Last edited Sep 30, 2020

Created on Sep 28, 2020

Five fruit shapes appear in a row, rendered as SVG circles with labels. Hovering over a circle turns it steel blue, while apples are red and lemons yellow. The visualization demonstrates data joins through animated transitions, removing apples, replacing one with a lemon, and filtering elements at timed intervals. It uses d3-selection, d3-scaleOrdinal, and transition methods to update position, radius, and fill based on a selectedFruit state.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Click to select

Five fruit circles animate into a row, with apples rendered large and red while lemons appear smaller and yellow. Clicking a circle selects it, highlighting it with a black stroke. The visualization uses d3.js v5 with the data-join pattern in `fruitBowl.js`, employing ordinal scales for color and radius, and transitions to animate entering, updating, and exiting circles over time.

RRoger Yu-Hsiang Lo

93% match

Loading thumbnail…

Select a fruit

Five fruit circles render in an SVG, each an apple or lemon represented by color and size. Clicking a circle selects it, adding a black stroke. D3 transitions animate the fruit entering, exiting, and changing type over time. The React framework manages state for selection and fruit data, while the D3 `scaleOrdinal` maps fruit types to colors and radii, and `data` joins drive the update pattern.

JJoseph Popoola

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…

Select them Fruits!

A row of apples renders as SVG circles, with each fruit’s identity selectable by clicking or hovering to highlight it with a black outline. The visualization uses D3 v5’s data join, `scaleOrdinal` for color and radius mappings, and chained transitions to animate circle enter, update, and exit states. Timed updates swap one apple for a lemon, while removals trigger smooth shrink-and-remove animations.

MMatthiasVanCampen

91% match

Loading thumbnail…

Bowl of Fruit - Click to selected

Five fruit circles transition and animate inside an SVG as apples are removed and one apple becomes a lemon. Clicking any fruit highlights it with a blue stroke, and the selection persists through data updates. Built with D3 v5, the visualization uses a data join with enter, merge, and exit selections, plus `transition().duration()` for size and position animation. Fruit type maps to color and radius via `scaleOrdinal`.

YYifu Chen

91% match

Loading thumbnail…

Bowl of Fruit - hover to select

Five SVG circles enter the scene as red apples, then sequence through timed updates: an apple disappears, another turns into a yellow lemon, and a third is removed. Hovering over any fruit selects it with a black outline, using mouseover and mouseout events to toggle the selection state. Fruit positions and radii come from ordinal scales mapping fruit type to color and size, while entering and exiting circles animate through chained transitions that adjust radius over one second. The visualization uses D3 v5 with data joins keyed by unique id.

DDi Zhen

91% match

Loading thumbnail…

Bowl of Fruit - Click to Select

Five fruit circles appear in a row, rendered as SVG elements colored by fruit type via a `scaleOrdinal` color scale, with apples in red and lemons in yellow. Clicking a circle logs its ID, while pre-scripted `setTimeout` calls dynamically remove circles, change an apple to a lemon, and filter the data array, triggering animated `transition` updates that shrink exiting circles to radius zero. The example uses D3 v7's data join pattern with `selection.enter`, `merge`, and `exit` to sync the visualization with changing data, initializing new circles at radius zero before animating them to their target sizes.

JJuyeonee

91% match

Loading thumbnail…

Bowl of fruit. Click to Select

Five circles represent apples in a bowl, rendered as red SVG circles using d3.scaleOrdinal for color and radius. Clicking a fruit selects it, highlighting it with a black stroke. The visualization uses d3 transitions to animate enter, update, and exit states, with fruits shrinking to zero radius on removal. Over three seconds, the code programmatically removes apples and changes one to a lemon, demonstrating data joins with d3.v5.

AAlex Arobelidze

90% match