Bowl of Fruit

100%

✓ Published0🌍 Public

Last edited Nov 4, 2020

Created on Nov 4, 2020

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.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

Similar vizzes

Loading thumbnail…

Bowl of Fruit

This example shows a bowl of fruit as animated circles representing apples and lemons over time. Using D3’s scaleOrdinal for color and radius, the visualization updates as fruits are removed, changed, or added, with transitions animating the circle sizes. The scene is rendered in SVG via React, with circle positions calculated by index and vertical centering. D3’s selection and transition APIs handle the lifecycle of entering, merging, and exiting elements.

Ssheafallick

94% match

Loading thumbnail…

Bowl of Fruit

A bowl of fruit animates as apples are eaten and replaced by lemons, with each fruit rendered as a colored circle whose size and hue correspond to its type. Using D3 v6's `scaleOrdinal` for color and radius mappings, the code binds fruit objects to SVG circles via `data` with a key function, then transitions enter, update, and exit states over one-second durations. Apples start red and large, while lemons appear yellow and smaller, demonstrating animated data joins in a React-free HTML page.

WWayne716

94% match

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

94% match

Loading thumbnail…

Bowl of fruits - click to select

A bowl of fruits visualizes a dataset of apples and lemons as colored circles within a bowl-shaped rectangle. Hovering over a fruit selects it, highlighting its outline in blue. Built with D3 v5, the example uses `selection.data`, `transition.attr`, and `scaleOrdinal` to map fruit types to colors and radii. Fruits are added, removed, and transformed via timed `setTimeout` calls, with enter, update, and exit selections animating their appearance and disappearance.

Ssongr0

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

94% match

Loading thumbnail…

Bowl of fruits

A bowl of fruits visualizes data joins in D3.js v5, showing five circles that represent fruit types. The example uses `d3.scaleOrdinal` to map fruit types to colors and radius values, with SVG circles positioned along a horizontal axis. After rendering, a `setTimeout` removes the last fruit, and another replaces one fruit with a lemon, triggering enter, update, and exit selections through the `render` function. The code demonstrates fundamental DOM manipulation with `d3.select`, `selection.data`, `selection.enter`, and `selection.exit` on a static SVG canvas.

AAsperge-Atomique

94% match

Loading thumbnail…

Bowl of Fruit

Five fruit circles with labels animate in a bowl-like row, with apples disappearing and one changing to a lemon. The example uses D3 v5’s data join and ordinal scales (colorScale, radiusScale) to map fruit type to fill and size, while enter and exit transitions handle updates. SVG rendering and React framework structure the visualization, with timeouts triggering pop, type-change, and filter operations.

PPaolaAntonicoli

94% match

Loading thumbnail…

Bowl of Fruit Click to Select

This example shows a bowl of fruit rendered as SVG circles, where clicking a fruit selects it with a black outline. The visualization uses React with D3 v5, employing `scaleOrdinal` for color and size mapping. D3’s data join and transitions animate fruit removal and type changes, with `transition().duration(1000)` updating circle positions and radii. Fruits are apples and lemons, and the code uses `selection.enter()`, `merge()`, and `exit()` to manage updates.

Ddacoylo

93% match