Skip to main content
SimilarExport ZIP
100%

Cesto di frutta

✓ Published0🌍 Public
TTerribleCactus
Last edited Aug 31, 2020
Created on Aug 31, 2020

Six fruits sit in a bowl, each drawn as a colored circle with a label. The bowl and fruits update through timed transitions, removing an apple, changing a fruit to a lemon, and deleting another apple. The example uses D3 v5’s data joins, `selection.merge`, and `scaleOrdinal` for color and radius mapping, rendering SVG shapes within a single declarative `fruitBowl` function that re-renders on each state change.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Fruit bowl

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.

Jjulieducasse
88% 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
87% match
Loading thumbnail…

Bowl of Fruit - Click to Select

A bowl of five apples renders as red circles in an SVG, with each fruit labeled by type. The visualization demonstrates data joins through timed state changes: one apple disappears, another becomes a lemon, and a third is removed. The code uses D3 v5 with modular functions `fruitBowl` and scales from `scaleOrdinal` for color and radius, updating circles and text via enter/update/exit selections.

Bben-chin-43
87% match
Loading thumbnail…

Bowl of fruit

Five fruit shapes sit in a row as SVG circles and labels, using d3.scaleOrdinal to map apple and lemon types to distinct radii and colors. Clicking a fruit highlights it with a black stroke. Over time, d3 transitions remove fruits, change an apple into a lemon, and filter out another, demonstrating data joins with enter, update, and exit selections.

AAbishek-Dulal
87% match
Loading thumbnail…

Bowl of Fruit - Click to Select

Five apples are rendered as red circles in an SVG bowl, and a timed sequence demonstrates D3 data joins by eating, replacing, and filtering fruits. Each apple is a circle with a label, positioned via a transform attribute using index-based spacing. The code uses `d3.scaleOrdinal` for color and radius mapping, while `selection.enter` and `selection.exit` manage element updates. The fruit data is an array of objects, and the visualization updates through repeated calls to a `fruitBowl` render function.

Xxychen0612.cs09@nycu.edu.tw
87% match
Loading thumbnail…

Bowl of fruit nested

Five apples render as red circles in an SVG bowl, then an apple is removed, one turns lemon yellow, and another is deleted in timed steps. The example shows D3.js data joins with key functions, using `selection.enter` and `selection.exit` to update groups and circles. `d3.scaleOrdinal` maps fruit types to colors and radii, while a `fruitBowl` function encapsulates the nested join logic.

MMatan
87% match
Loading thumbnail…

BOWL OF FRUIT

Five circles representing fruit sit in a row, initially all apples rendered in red. After a second, the last fruit is removed, and a second later, the third fruit changes into a yellow lemon. The visualization demonstrates D3’s declarative update patterns using `selectAll`, `enter`, `merge`, and `exit` operations on SVG circles, with ordinal scales mapping fruit type to fill color and radius.

AAaron Goebel
87% match
Loading thumbnail…

Bowl of Fruit - Nested

Five apples render as nested SVG circles in a row, their size and color mapped by `d3.scaleOrdinal` to fruit type. The code uses the `fruitBowl` module to draw circles and labels with `.enter()`, `.merge()`, and `.exit()` transitions. Timed actions mutate the `fruits` array, removing one apple, replacing another with a lemon, and filtering out a third, demonstrating incremental updates to the DOM.

HHe Jianfeng
87% match