Bowl of fruits

100%

Bowl of fruits

✓ Published1🌍 Public

Last edited Sep 2, 2019

Created on Aug 29, 2019

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.

AI-generated description

Hover to see the details.

MIT Licensed

Similar vizzes

Loading thumbnail…

Bowl of fruit

A dynamic SVG bowl of fruit demonstrates the enter, update, and exit pattern in D3 v5. The visualization initially renders five red apples as circles with labels, then sequentially removes one apple, changes a second apple into a yellow lemon, and filters out another fruit over timed intervals. Using `scaleOrdinal` for color and radius mapping, the code applies `selection.merge` to update shared attributes and manages transitions with `attr` for x-position and radius. The example relies on `setTimeout` callbacks to trigger re-renders and shows how data joins handle dynamic changes.

IIgor Borzunov

95% match

Loading thumbnail…

Bowl of fruits

This example shows a dynamic bowl of fruits rendered as circles in an SVG canvas, where apples and lemons appear and disappear over time. Initially five fruits are drawn using a D3 data join with `scaleOrdinal` for both color and radius, mapping fruit types to red or yellow. After one second, a fruit is removed and another changes from an unknown type to a lemon, triggering D3’s enter/exit updates to reflect the state changes. The code uses D3 v5’s `select`, `range`, and `scaleOrdinal` APIs with explicit `setTimeout` calls to drive the transitions.

AAsperge-Atomique

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

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

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

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 fruit 2

A dynamic fruit bowl demonstrates animated state changes as apples are eaten and swapped for lemons over timed intervals. Rendered as SVG, the visualization uses d3.scaleOrdinal to map fruit types to colors (red/yellow) and radii (50/40), with circles and labels positioned via translated groups. The d3 data-join pattern handles enter, update, and exit selections seamlessly, while setTimeout triggers sequential modifications to the fruit array, animating the bowl’s composition between apple and lemon variants.

Wwyh1029

94% match