Select them Fruits!

100%

Select them Fruits!

✓ Published1🌍 Public

Last edited Feb 13, 2020

Created on Feb 13, 2020

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.

AI-generated description

Click Any Object to select it's identity

MIT Licensed

Similar vizzes

Loading thumbnail…

Click to Select

A row of apples is rendered as red circles, each of which can be clicked to select it, highlighting the chosen fruit with a thick black outline. The visualization animates transitions as fruits are removed or replaced with lemons, changing both color and radius. Built with D3 v5 using the SVG renderer, the code employs `scaleOrdinal` for color and size mappings, join selections with `merge`, and `transition().duration()` for animated updates.

VVito

93% match

Loading thumbnail…

Click to Select

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.

Ggoodej

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

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

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

89% 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.

89% match

Loading thumbnail…

Bowl of Fruit - Click to Select

Five fruit circles appear in a row, with apples in red and one lemon in yellow, rendered as an SVG. Clicking any fruit highlights it with a black stroke to mark it as selected. The example uses D3 v5’s data join, `scaleOrdinal` for color and radius, and `transition` to animate enter, update, and exit states. Each fruit carries a random ID, and timed actions remove fruits or change an apple to a lemon.

AAmol Kulkarni

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

89% match