D3 Bowl of Fruit - Click to Select

100%

D3 Bowl of Fruit - Click to Select

✓ Published1🌍 Public

Last edited Dec 16, 2019

Created on Dec 16, 2019

Forked from D3 Bowl of Fruit - General Update Pattern

A dynamic scatterplot uses SVG circles to represent a bowl of fruit that changes over time. Apples and lemons are distinguished by color and size, and clicking a fruit selects it with a black outline. The visualization animates data additions, removals, and type changes using D3’s transition API with a one-second duration. The code imports `scaleOrdinal` and `select` from D3 v5, and initial fruit data is generated with `range` and `Math.random`.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

D3 Bowl of Fruit - Hover to Select

A dynamic scatterplot of fruit items animates apples and lemons as circles, with hover selecting a fruit and highlighting it with a black outline. The D3 version 5 example uses the `select` and `range` functions to manage an SVG, while `scaleOrdinal` maps fruit types to colors and radii. The `fruitBowl` module handles enter, update, and exit transitions via `transition().duration(1000)`, animating circle radius and position over time. Data changes occur through timed calls that pop, mutate, push, and filter the fruit array.

Rrdeichert

95% match

Loading thumbnail…

Bowl of Fruit - Click to Select

A dynamic scatterplot-like visualization displays a bowl of fruit as colored circles, with apples in red and lemons in yellow. The SVG rendering, created with D3 v5, uses `scaleOrdinal` for color and radius mapping and `rect` for the bowl shape. Clicking a fruit logs its id to the console. The example demonstrates incremental data updates by adding, removing, and modifying elements over time.

JJuyeonee

94% match

Loading thumbnail…

Bowl of fruit - Click to Select

An interactive scatterplot of a fruit bowl displays apples and lemons as colored circles, with a click selecting a fruit and highlighting it with a black stroke. The visualization uses D3 v5’s data joins, transitions, and ordinal scales to animate circles entering, exiting, and resizing via `transition().duration(1000)`. Apples render in red at radius 50, lemons in yellow at radius 25, with positions computed by index. The code demonstrates real-time updates: a fruit is removed, an apple changes into a lemon, and another is deleted after three seconds.

LLiu2021311512

93% match

Loading thumbnail…

Bowl of Fruit - Clicking is life

A dynamic scatterplot visualizes fruit data as colored circles representing types—apple, lemon, melon—with size encoding type and color encoding category. Users click or hover over circles to select or highlight them, which updates stroke, opacity, and triggers animated transitions via d3.transition. The example uses d3.scaleOrdinal for color mapping and d3.selection with .merge for incremental updates, rendering through SVG. Data originates from an in-memory fruit array, with interactions managed by event handlers for click and mouseover.

Ddaanasma

93% match

Loading thumbnail…

Bowl of Fruit-Click to Select

A bowl of fruit rendered as SVG circles uses D3 v5 to encode fruit type through color and size: apples appear red and large, lemons yellow and small. The scatterplot-like display animates through timed state changes, removing an apple, converting another to a lemon, and filtering a third. The example demonstrates incremental updates with `selection.enter`, `merge`, and `exit` methods, while ordinal color and radius scales map categorical data to visual channels.

XX. N. Chu

92% match

Loading thumbnail…

Bowl of Fruit - CLick to select

This interactive D3.js example displays a bowl of fruit as colored circles, where apples render in red and lemons in yellow, with size encoding fruit type. Users can click or hover over a fruit to select it, which adds a black outline around the chosen circle. The visualization uses D3's ordinal scales for color and radius mapping, and animates circle transitions with the `.transition()` API. Data changes over time, automatically removing fruits and swapping an apple for a lemon, demonstrating dynamic updates with enter, merge, and exit states in SVG.

AAaron Goebel

92% match

Loading thumbnail…

Bowl of fruit - Click to select

This example demonstrates an animated, interactive SVG fruit bowl where apples and lemons are represented as colored circles. Users can click a fruit to select it, which adds a black stroke around it. The visualization shows state changes through time, including fruit removal, type changes, and filtering. Built with D3 v5, the code uses `scaleOrdinal` for color and radius mapping, and D3's selection API with `enter`, `merge`, and `exit` to animate circles and labels smoothly when the underlying data array is modified.

IIgor Borzunov

92% match

Loading thumbnail…

Bowl of Fruit - Click to select

A dynamic bowl of fruit shows five circles—apples and lemons—that rearrange and resize over time as items are removed or change type. Clicking any fruit selects it, highlighting the chosen circle with a black stroke. The visualization uses D3 v5’s `select`, `range`, `scaleOrdinal`, and transitions to animate circle positions and radii, with an SVG render and JavaScript timers driving the scripted state changes.

Ccornshoots

91% match