Bowl of Fruit

100%

Bowl of Fruit - Topologica Experiment

✓ Published1🌍 Public

Last edited Sep 15, 2018

Created on Sep 9, 2018

This example demonstrates a dynamic "Bowl of Fruit" graphic where apples and lemons are represented as colored circles. The visualization uses D3.js and the Topologica library for reactive dataflow, updating the SVG display in response to timed events and user hovering. The code initializes five fruit circles, then removes one apple, and later replaces another apple with a lemon, while a custom color scale and radius scale map fruit types to visual attributes. It also adjusts stroke styling based on hovered index to highlight the selected fruit.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Bowl of Fruit - Topologica Experiment

Five apples appear as red circles in a row, then one is removed and another becomes a yellow lemon, with a black outline on hover. Built with Topologica and D3 v5, the visualization demonstrates declarative incremental updates: the `fruitBowl` component uses `selection.selectAll` and `merge` to add, modify, and remove SVG circles based on dataflow state. Interactions trigger `mouseover` and `mouseout` events, updating the `hoveredIndex` through Topologica's event-driven dataflow.

Ccodexmon

94% match

Loading thumbnail…

This example demonstrates a dynamic fruit bowl visualization where apples and lemons are drawn as circles with color and size mapped to fruit type. The scene animates through a sequence of state changes—removing fruits, replacing one type with another, and filtering—using D3.js v5 selections and merge operations. The SVG output is generated declaratively, with the `scaleOrdinal` function mapping fruit types to visual properties like fill color and radius. The bowl itself is a static rectangle with rounded corners, while the fruits are positioned and updated imperatively via a custom `fruitBowl` function that handles entering, exiting, and updating elements.

Ssakhabutdinov

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

91% match

Loading thumbnail…

Bowl of Fruit - Click to Select

A dynamic fruit bowl displays five circles representing apples and lemons, with each fruit scaled by type and color-coded via a categorical scale. Clicking a fruit selects it and adds a black stroke. The visualization uses D3’s selection API to incrementally update the SVG, animating radius and position changes over one-second transitions as fruits are eaten or replaced, demonstrating stateful, event-driven interactions.

Ssakhabutdinov

91% match

Loading thumbnail…

Bowl of Fruit - Interactive

This interactive example uses D3 v5 to visualize a bowl of fruit as colored circles on an SVG canvas. Apples appear as red circles and lemons as yellow ones, with their radii scaled by fruit type via `scaleOrdinal`. The visualization dynamically updates over time: the fruit count decreases, one apple transforms into a lemon, and an apple is removed from the sequence. Clicking on fruit triggers an `onClick` handler that selects a fruit, though the code does not visibly alter the rendering based on that selection.

Ggmille22

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

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

91% 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é

91% match