Interact with vis

100%

Interact with vis

✓ Published0🌍 Public

Last edited Mar 21, 2023

Created on Mar 21, 2023

A selection of apples and lemons enters, updates, and exits with animated transitions as the dataset changes over time. Clicking a fruit highlights its outline in white. The code uses SVG rendering with D3 v7 data joins, `scaleOrdinal` for color and radius mapping, and chained `.transition().duration()` calls to smoothly animate position, radius, and removal.

AI-generated description

A demonstration of how to start using D3 version 6.

MIT Licensed

Similar vizzes

Loading thumbnail…

interactions

This example demonstrates a dynamic fruit bowl visualization where apples and lemons are rendered as colored circles that appear, disappear, and change type over time. Clicking a circle logs its ID to the console, though no visible selection change occurs. The code uses D3 v5’s `scaleOrdinal` for color and radius mapping, `selection.enter()` and `exit()` with `transition().duration()` for animated updates, and SVG circles that are re-bound to data via `data(fruits, d => d.id)`. The scene cycles through adding, removing, and replacing fruits on a timed sequence.

Llupica.matthew@gmail.com

85% match

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

83% match

Loading thumbnail…

Bowl of fruits, click to select

Circles representing apples and lemons arrange themselves in a row, with a black stroke highlighting the fruit selected by a click. The visualization demonstrates animated enter, update, and exit transitions: apples shrink away, one apple morphs into a lemon, and the selection stroke updates. It uses D3 v5 with data joins and ordinal scales for color and radius, while `transition().duration(1000)` animates position and size changes.

YYedrup

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

83% match

Loading thumbnail…

Bowl of Fruit - Interactions

Five apples transition in and out of an SVG bowl over timed intervals, with an apple morphing into a lemon mid-sequence. Hovering or clicking a fruit highlights it with a colored outline, and the selection animates as fruits are added or removed. Using D3 v5's data join, enter, update, and exit selections, each circle's radius and fill map through ordinal scales. Interactions trigger a card-based render cycle, while `transition().duration(1000)` animates position and radius changes.

Ssherryyx

82% match

Loading thumbnail…

Hover to Select, Click apple to convert to lemon and click lemon to delete

An interactive D3 v5 visualization presents a bowl of five apples rendered as SVG circles. Hovering over a fruit selects it with a black stroke. Clicking an apple animates its color and radius to transform into a lemon, while clicking a lemon removes it from the bowl with a shrinking transition. The code uses `scaleOrdinal` for color and radius mappings, and `transition().duration(1000)` for smooth animations, driven by data join with enter/update/exit selections.

Ccsroysudarshan

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

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

82% match