Skip to main content
SimilarExport ZIP
100%

14.a - fruit bowl - click to select - dataviz 2018

✓ Published1🌍 Public
Zzach b.
Last edited Jan 13, 2022
Created on Nov 25, 2021

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.

AI-generated description

datraviz 2018 #14.a - fruit bowl - click to select

MIT Licensed

Similar vizzes

Loading thumbnail…

14.c - fruit bowl - hover & click select - dataviz 2018

Five apples sit in a bowl, selectable by click and hover, with each fruit’s outline changing color to indicate state. The code uses D3 v7’s data join and transition methods to animate fruit radius, position, and label opacity as items are removed or change type. The `renderFruitBowl` function handles enter, update, and exit selections, while `scaleOrdinal` maps fruit types to colors and radii. Apple and lemon labels appear via SVG text elements.

Zzach b.
94% match
Loading thumbnail…

14.b - fruit bowl - hover to select - dataviz 2018

A fruit bowl shows five apples arranged in a shallow dish, and hovering over any fruit highlights it with a black stroke. The visualization uses D3 v7's selection and transition APIs to animate new fruits entering, exiting, and changing type, such as when an apple transforms into a lemon. The code demonstrates enter, update, and exit states using `selectAll`, `merge`, and `transition().duration()`, with interactions driven by `mouseover` and `mouseout` events. All rendering is done in SVG.

Zzach b.
93% 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
91% 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
91% match
Loading thumbnail…

Bowl of Fruit - Click to Select

A bowl of fruit displays five apples that animate in with a smooth scaling transition. Hovering over any fruit highlights it with a black outline, while a timeout sequence removes apples and changes one into a lemon. The example uses D3 v5 with `scaleOrdinal` for color and radius, and demonstrates data joins with `selection.data` and `transition.attr` for enter, update, and exit animations in SVG.

FFernando Gonzalez - Valadez
91% 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
91% 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
91% match
Loading thumbnail…

Boll of fruit - click to select

Five apples transition into a bowl, resizing and recoloring via ordinal scales, while click-to-select highlights a fruit with a black stroke. The D3 v5 data join manages enter, update, and exit states, animating radius and position with `transition().duration(1000)`. Apples are removed, replaced with lemons, and filtered over timed intervals, demonstrating object-consistent updates through a key function. SVG rendering with `scaleOrdinal` for colors and radii drives the interactive, animated visualization.

Lloicvdk
90% match