Skip to main content
SimilarExport ZIP
100%

Click to Select

✓ Published1🌍 Public
VVito
Last edited Nov 29, 2019
Created on Nov 29, 2019

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.

AI-generated description
MIT Licensed

Similar vizzes

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

Five apples are rendered as red circles in a row, and clicking one selects it by giving it a black outline. The visualization uses React to manage the `selectedFruit` state, and D3.js `scaleOrdinal` maps fruit type to both color and radius. The current static view shows apples only, but commented-out code indicates planned transitions for removing fruit or changing an apple to a lemon.

Xxychen0612.cs09@nycu.edu.tw
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
90% 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
90% match
Loading thumbnail…

Click to Select

Five apples render as SVG circles that transition in size and position when clicked, receiving a black stroke to indicate selection. The example demonstrates d3 data joins with key functions, ordinal scales for color and radius, and chained transition APIs. D3 v6’s selection.on, merge, and exit patterns handle dynamic updates as fruits are removed or one apple transforms into a lemon.

WWayne716
89% match