Skip to main content
SimilarExport ZIP
100%

Fruit bowl

✓ Published0🌍 Public
Jjulieducasse
Last edited Oct 20, 2019
Created on Sep 27, 2019

A fruit bowl shows five fruit circles—oranges and lemons—arranged in a row on a grey background. Viewers can click a fruit to highlight it with a black stroke. Over time, fruits are removed, replaced, or filtered out, and the remaining fruit smoothly transition to new positions. The example uses D3 v5 data joins with `selection.enter`, `merge`, and `exit` to animate SVG `circle` elements via `transition.duration`, and `scaleOrdinal` to map fruit types to radii.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Bowl of fruit - Click to Select

Five fruit circles sit in a row; clicking one highlights it with a black outline. Apples and lemons are distinguished by color and size, and fruit is removed or swapped in over time. Built with D3 v5, the example uses a general update pattern with `selection.selectAll`, `.enter().append`, `.merge`, and `.exit().transition` to animate radius and position changes over one second. Settings come from an `index.js` script that modifies a fruit array at timed intervals.

MMelina
93% match
Loading thumbnail…

bowl of fruit 4

Five circles representing fruit move and scale into a bowl-shaped layout, alternating between red apples and yellow lemons. Hovering highlights a fruit with a black stroke, and exiting fruit shrink away. The example uses D3 v5’s selection joins, `scaleOrdinal` for color and radius, and chained `transition().duration(1000)` to animate enter, update, and exit states. Data is generated randomly in `index.js` with timed mutations.

Wwyh1029
93% match
Loading thumbnail…

Bowl of Fruit - Hover to Select

Five circles representing fruit transition into and out of a bowl, with apples and lemons distinguished by color and size. Hovering over a fruit highlights it with a black stroke, while the `fruitBowl` function uses D3 v5's data join and `transition().duration(1000)` to animate shape changes. The example demonstrates ordinal scales for mapping fruit type to color and radius.

YYF
93% match
Loading thumbnail…

Bowl of Fruit - Click to select

Five circles represent fruit in a bowl, with apples and lemons distinguished by color and size. Hovering over a fruit selects it by adding a black stroke, while hovering away deselects it. The visualization uses d3 v5 with scaleOrdinal for color and radius, and the fruitBowl module binds data to SVG circles with enter, update, and exit transitions. A timer script removes and replaces fruits, demonstrating animated data updates over three seconds.

IIsabel
93% match
Loading thumbnail…

Bowl of Fruit - Click to select

Five circles representing fruit appear in a row, with apples as large red circles and lemons as smaller yellow ones. Clicking a fruit selects it with a black outline. D3 v5 scales, including `scaleOrdinal`, map fruit types to size and color, while the `fruitBowl` function and `transition` animate circle radius changes. The example uses array updates to add or remove fruit, triggering enter and exit transitions.

SSophia Murage
93% match
Loading thumbnail…

Bowl of Fruit -Click to select

A bowl of fruit shows five apples and a lemon as colored circles that can be clicked to select, highlighting the chosen fruit with a black stroke. The visualization animates fruit removal and type changes over time using D3 v5’s data join and transitions. The `fruitBowl` function uses `scaleOrdinal` for color and radius, with `selectAll`, `enter`, `merge`, and `exit` to manage circle elements, while `transition().duration(1000)` animates attribute changes on an SVG canvas.

Pprincit
92% match
Loading thumbnail…

Bowl of Fruit - click select

Five fruit circles render in an SVG as a bowl of apples and lemons, with click selection to highlight a fruit with a black outline. The example demonstrates data joins and transitions using D3 v5, with circles entering, exiting, and updating via `selection.data`, `transition.attr`, and a custom `fruitBowl` module. Color and radius scales map fruit types to visual properties, while timed actions remove, replace, and filter the underlying array to animate changes.

AAndrew Fletcher
92% match
Loading thumbnail…

Bowl of fruit - click to select

Five fruit circles render as apples and a lemon, with an ordinal scale mapping fruit types to colors and radii. Clicking a fruit selects it, drawing a black stroke around that circle, while the join uses d3 transitions to animate enter, update, and exit states. The data array mutates over time to demonstrate keyed joins and animated updates.

IIsmaelHernandezL
92% match