Ball of Fruit

100%

✓ Published0🌍 Public

Last edited Jun 20, 2020

Created on Jun 20, 2020

Fruit appears in a row of apples inside a brown bowl, with each fruit labeled by type. A series of timeouts demonstrates data updates: one apple is removed, another becomes a lemon, and a third is filtered out. The code uses D3 v5 selections and the ordinal scales `scaleOrdinal` for mapping fruit types to colors and radii, with SVG rendering. The `fruitBowl` function manages enter, update, and exit selections for grouped circles and text, updating transforms and attributes via `merge`.

AI-generated description

A bare minimum HTML page.

Similar vizzes

Loading thumbnail…

Ball of Fruit

Five apples rendered as red circles transition into a bowl, with one apple transforming into a yellow lemon while another disappears. The D3.js v5 example uses `scaleOrdinal` for color and radius mapping, `transition()` for animated duration changes, and React-style selection merging. The `fruitBowl` component handles enter, merge, and exit states with click-driven stroke highlighting. Data is stored as an in-memory array of fruit objects with random IDs, and the SVG output uses a 960x500 canvas with animation over three timed steps.

DDanzeOnn

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

90% match

Loading thumbnail…

Ball of Fruit

Animated SVG circles represent apples and lemons in a fruit bowl, with hover events selecting a fruit and triggering a black outline. The visualization uses d3’s `scaleOrdinal` for color and radius mapping, and `transition` for smooth resizing and repositioning. Written in React with D3 v5, the data is a JavaScript array whose length and fruit types change over time, demonstrating enter, update, and exit transitions as fruits are added, removed, or substituted.

DDanzeOnn

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

90% match

Loading thumbnail…

Bowl of Fruit

A bowl of fruit animates as apples and lemons are eaten and change types, with each fruit rendered as a colored circle and label inside a rounded rectangular bowl. The example uses React with D3 v5, leveraging `scaleOrdinal` for color and radius mappings, data joins to update SVG groups, and `transition().duration(1000)` to animate radius changes. The `fruitBowl` function binds fruit data to `g` elements, appending circles and text, while `setTimeout` calls trigger state changes over time.

YYoram

89% match

Loading thumbnail…

Bowl of Fruit - Click to select

A bowl of fruit animates as apples shrink and disappear, one apple morphs into a lemon, and another apple is removed entirely, with each change triggered by scripted timeouts. The visualization uses D3 v5's `select`, `scaleOrdinal`, and `.transition()` API to smoothly interpolate circle radii, fill colors, and group transforms over one-second durations. The custom `fruitBowl` function handles enter, update, and exit states for both circle and text elements, while a pink rectangle serves as the bowl. Fruit position and radius depend on index and type, encoded through ordinal scales for color and size.

Fforeverworld1879

89% match

Loading thumbnail…

Fruit Bowl

This example shows a fruit bowl where five apples shrink and disappear over time, with one apple turning into a lemon. The data-driven update pattern uses D3’s data joins to handle enter, update, and exit selections for SVG circles and text labels. The code relies on `scaleOrdinal` for color and radius mappings, and `selection.merge` to apply shared attributes across entering and updating elements. The React starter structure wraps the D3 logic in a reusable `fruitBowl` function, rendering to an `<svg>` element with fixed dimensions.

Ggabcoderboi

89% match

Loading thumbnail…

Ball of Fruit

Five apples sit in a row on a baseline, rendered as red circles in an SVG with D3 transitions. When a fruit is removed at one-second intervals, the circle shrinks to a radius of zero and disappears. One apple changes type to a lemon, turning yellow and shrinking its radius through an ordinal scale. The React-based example uses the D3 selection API and transition methods to animate enter, update, and exit states.

DDanzeOnn

89% match