Skip to main content
SimilarExport ZIP
100%

Bowl of Fruit - Export Module to separate file

✓ Published2🌍 Public
MMinwoo Pak
Last edited Nov 16, 2019
Created on Nov 11, 2019

A modular D3 v5 example renders a changing bowl of fruit as circles in an SVG. It uses `d3.scaleOrdinal` for color and radius mapping, and `d3.select` with a `data` join to manage enter, update, and exit selections. The `fruitBowl` function is exported from a separate file and imported into `index.js`, which drives the animation with `setTimeout` calls to remove apples and change one to a lemon. The data is plain JavaScript objects with a `type` property, and the visualization updates over three seconds.

AI-generated description
MIT Licensed

Similar vizzes

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
89% match
Loading thumbnail…

Bowl of Fruit

A bowl of fruit demonstrates animated data joins with D3.js. Five apples render as colored circles, then a sequence of timed transitions removes fruit, changes an apple into an orange, and filters another apple, showing enter, update, and exit selections. The code uses `scaleOrdinal` for color and size, `transition().duration()`, and custom `fruitBowl` and `render` functions, rendering SVG groups with circles and text labels. Data is generated randomly with `Math.random` IDs.

YYifu Chen
89% 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
89% match
Loading thumbnail…

Bowl of fruit

A bowl of fruit demonstrates data-binding and animated transitions in D3.js, using circles to represent apples and lemons that update over time. It shows how fruits are added, removed, and have their type changed, with each fruit assigned a unique id to track enter, update, and exit selections. The code uses `d3.scaleOrdinal` for color and radius mapping, `selection.merge`, and `transition.duration` to animate position and size changes over one second. Rendering uses SVG elements driven by a `fruitBowl` function that receives a fruits array and height, with JavaScript `setTimeout` calls triggering sequential updates.

TTheRedUnicorn
88% match
Loading thumbnail…

Bowl of Fruit - click select

Five fruit circles render in an SVG as a bowl of apples and lemons, with click selection to highlight a fruit with a black outline. The example demonstrates data joins and transitions using D3 v5, with circles entering, exiting, and updating via `selection.data`, `transition.attr`, and a custom `fruitBowl` module. Color and radius scales map fruit types to visual properties, while timed actions remove, replace, and filter the underlying array to animate changes.

AAndrew Fletcher
88% match
Loading thumbnail…

Bowl of Fruit - Click to Select

Five pieces of fruit sit in a row inside an SVG bowl; clicking a fruit highlights its outline in black. The view updates when a piece is removed or one apple changes into a lemon. The code uses D3 v5 with a data join, `scaleOrdinal` for color and radius, and chained `transition()` calls to animate entering, exiting, and resizing circles. Clicking triggers a callback that re-renders the bowl via the exported `fruitBowl` function.

Ffernandotsurukawa
88% 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é
88% 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
88% match