Click to Select

100%

Click to Select

✓ Published1🌍 Public

Last edited Nov 20, 2020

Created on Nov 19, 2020

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.

AI-generated description

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

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

89% match

Loading thumbnail…

Bowl of Fruit - Click to Select

A bowl of fruit demonstrates D3.js data joins and interactive selection. Five apples render as circles that transition in size and position over time, with one apple morphing into a lemon and others disappearing. Clicking any fruit highlights it with a black stroke. The code uses `selection.data`, `enter`, `merge`, and `exit` with `transition.attr` to animate SVG circles, plus `scaleOrdinal` for color and radius mappings.

AArriannePandaraoan

89% match

Loading thumbnail…

Bowl of Fruit - Click to Select

Five circles represent apples in an SVG bowl. Clicking one turns its stroke black to mark it selected. The example demonstrates the D3 data join with enter, update, and exit selections, animating circle radius, position, fill, and stroke via `transition().duration()`. Using `scaleOrdinal` for color and size, it removes fruits on a timer, filters an apple, and changes one to a lemon, all rendered with `select` and `fruitBowl`.

WWarren-Fitzhenry

89% match

Loading thumbnail…

Bowl of Fruit - Click to Select

A bowl of five apples is rendered as SVG circles; clicking any fruit selects it with a black stroke, while the remaining fruit animate into position over one second. The example demonstrates enter, update, and exit selections with `d3.selectAll` and `transition`, using `scaleOrdinal` for color and radius by fruit type. As timers fire, apples are removed, and one apple transforms into a lemon. The `fruitBowl` function handles click events via an `onClick` callback, and `d3.v6` powers the data joins.

EEllednera

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

89% match

Loading thumbnail…

Bowl of Fruit - Click to Select

A bowl of five apples renders as SVG circles, and clicking a fruit selects it with a black stroke. The example demonstrates data joins and transitions in D3 v7: apples shrink and vanish when eaten, and one apple is replaced by a lemon after two seconds, updating its fill and radius. The fruitBowl module uses `selection.enter`, `selection.exit`, and `transition.attrTween` to animate circle radii and positions, while a `scaleOrdinal` maps fruit types to colors and sizes. Click events trigger a re-render, highlighting the selected fruit.

TToooooooT

88% match

Loading thumbnail…

click to select

Five circles represent fruit in a bowl, rendered as SVG by D3 v5. Clicking a fruit selects it, highlighting it with a black stroke. A data join with keyed enter, update, and exit transitions animates shape changes: plums shrink and disappear, and one plum transforms into a lemon. The example uses d3.scaleOrdinal for color and radius, and transitions via `selection.transition()` with a duration of 1000ms.

Bbencestubnya

88% match