Bowl of fruit

100%

✓ Published0🌍 Public

Last edited Mar 27, 2020

Created on Mar 27, 2020

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.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

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.

Zzhangfa

95% 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

95% 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 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

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

93% match

Loading thumbnail…

Bowl of fruit

A bowl of fruit depicts five apples as circles, which are eaten, replaced by a lemon, and otherwise removed over time, with each change animated via a one-second transition. The visualization uses D3 v6 with data joins and merge to update SVG circle elements, while ordinal scales map fruit types to colors and radii. The React framework wraps this D3 code, with SVG rendering driven by timed state changes.

CChinzorigt Ganbat

93% match

Loading thumbnail…

Bowl of fruit

A bowl of fruit demonstrates fundamental DOM manipulation with D3.js by drawing apples and lemons as colored circles and updating them over time. The visualization uses an ordinal color scale and radius scale to map fruit types to visual properties, while a data join binds the fruit array to SVG circles. The code employs `selection.data()`, `enter()`, and `exit()` to add, update, and remove elements, and uses `setTimeout` to trigger transitions like eating an apple or swapping a fruit for a lemon.

DDaniel Piqué

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