Skip to main content
SimilarExport ZIP
100%

Bowl of Fruit

✓ Published0🌍 Public
Zzhangfa
Last edited Jul 31, 2020
Created on Jul 31, 2020
Forked from Bowl of Fruit

A bowl of fruit shows a row of apples and lemons rendered as colored circles on a rounded rectangle, with each fruit labeled by type. The visualization updates over time as apples are removed or replaced with lemons, demonstrating data joins. Built with D3 v5, it uses `scaleOrdinal` for color and radius mappings, `selectAll` with enter/merge/exit patterns, and SVG groups with `translate` transforms. The rendering is SVG, with the bowl drawn as a `<rect>` and fruit as `<circle>` elements.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Bowl of fruit

A bowl of fruit uses D3 v5 to render a row of apples and lemons inside a rounded rectangle, updating as fruits are added, removed, or replaced over time. The visualization relies on ordinal color and size scales to map fruit types to red and yellow circles of varying radii, while SVG groups and circles are joined to data using selection.enter and merge patterns. Shape transitions are driven by timed intervals that pop, filter, and mutate the fruit array.

PPedro Ernesto Tramontina
95% match
Loading thumbnail…

Bowl of Fruit

A bowl of fruit visualizes a small dataset of fruits as colored circles, with apples in red and lemons in yellow. The example demonstrates enter, update, and exit selections in D3 v6, using `scaleOrdinal` for both color and radius. As the animation progresses, fruits are removed from the array and types change, triggering corresponding SVG circle updates via the `fruitBowl` module. The rendering relies on plain SVG elements and a React-based scaffold.

Mmbergevoet
94% match
Loading thumbnail…

Bowl of fruit

A bowl of fruit shows five apples in a wide rounded rectangle, with one apple changing to a lemon and fruits being removed over time. The visualization uses D3 v5 with SVG rendering, binding fruit data to groups containing circles and text labels. d3.scaleOrdinal maps fruit types to colors and radii, while enter, update, and exit selections manage dynamic changes triggered by setTimeout intervals.

SShane Carey
94% match
Loading thumbnail…

Bowl of fruit WITH BOWL

Five fruit circles representing apples and lemons sit in a rounded rectangular bowl on an SVG canvas, with apples colored red and lemons yellow. Using D3 v6 data joins with transitions, the visualization animates changes over time: apples disappear, one apple transforms into a lemon, and a fruit is removed entirely, with the bowl width adjusting dynamically. A color scale (scaleOrdinal) maps fruit types to fill colors, while transitions animate radius and position changes over one-second durations.

JJoachim Klug
94% 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

Five fruit circles represent apples and lemons in an animated bowl. The visualization uses a D3 v5 data join to update the SVG, with fruits appearing, disappearing, and changing type over timed intervals. A scaleOrdinal color scale maps apples to blue and lemons to yellow, while another scale assigns radii of 50 and 30 pixels. The code transitions the circle radius property over one second for entering and exiting elements.

AAtrayeeDeb
93% match
Loading thumbnail…

Bowl of fruit - Nested Elements

A bowl of fruit demonstrates nested SVG elements with a dynamic data join, showing apples and lemons arranged in a row. The visualization uses a D3 ordinal scale to map fruit types to colors and radii, while enter, update, and exit selections manage the transitions as fruits are eaten or replaced over time. Circles and text labels are appended within each group element, and the bowl is drawn as a rounded rectangle behind the fruit.

Hhugomell
93% match
Loading thumbnail…

Bowl of Fruit - Click to Select

A bowl of fruit demonstrates a data join pattern with D3 v5, showing how a list of apples and lemons responds to changes over time. Five apples appear in a rendered bowl, then a fruit is removed, one apple changes to a lemon, and another apple disappears. The `fruitBowl` function uses `scaleOrdinal` for color and radius, while `selection.data`, `enter`, `merge`, and `exit` manage SVG `g`, `circle`, and `text` elements, updating positions with `attr('transform')` and `transition`.

Ssiddharth171
93% match