Skip to main content
SimilarExport ZIP
100%

Bowl of Fruit - Click to Select

✓ Published1🌍 Public
JJuyeonee
Last edited Jul 20, 2021
Created on Jul 20, 2021

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.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

D3 Bowl of Fruit - Click to Select

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`.

Rrdeichert
94% 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
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 - Click to Select

The visualization shows a bowl of fruit where individual apples and a lemon can be clicked to select them, highlighting the chosen fruit with a thick black stroke. The fruit bowl updates over time as apples are removed or replaced, demonstrating data join transitions. Built with d3.v5, the example uses `scaleOrdinal` for color and radius mapping, SVG groups for positioning, and event handlers on circles for click interactions.

MMiish84
93% match
Loading thumbnail…

Bowl of Fruit - Interactive

This interactive example uses D3 v5 to visualize a bowl of fruit as colored circles on an SVG canvas. Apples appear as red circles and lemons as yellow ones, with their radii scaled by fruit type via `scaleOrdinal`. The visualization dynamically updates over time: the fruit count decreases, one apple transforms into a lemon, and an apple is removed from the sequence. Clicking on fruit triggers an `onClick` handler that selects a fruit, though the code does not visibly alter the rendering based on that selection.

Ggmille22
93% match
Loading thumbnail…

Bowl of Fruit - Click to Select

This example shows a dynamic bowl of fruit represented as colored circles in an SVG canvas. The visualization initially displays five apples, then sequentially removes one fruit, changes another from an apple to a lemon, and filters out a second apple, demonstrating how the `fruitBowl` function from `fruitBowl.js` updates the chart with each state change. The code uses D3 v5’s `scaleOrdinal` for color and radius mapping, and relies on the selection and data-join methods (`.enter()`, `.merge()`, `.exit()`) to manage circle elements.

AAsperge-Atomique
93% match
Loading thumbnail…

Bowl of fruits

A dynamic SVG visualization renders a changing bowl of fruits using D3 v5's data-join pattern. Five apples appear initially, then the code removes one fruit, converts another to a lemon, and filters out a third over timed intervals. The fruitBowl module applies `scaleOrdinal` for color and radius, mapping apples to red circles and lemons to yellow ones. Circles enlarge on hover via CSS, showing interactive feedback.

Vvladvaculin
93% 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