Fruit Bowl

100%

✓ Published0🌍 Public

Last edited Oct 29, 2019

Created on Oct 29, 2019

Fruit Bowl demonstrates dynamic data visualization with D3.js, showing a bowl of fruit that updates over time. Animated transitions adjust the bowl's width while apples and lemons appear, disappear, and change types through shifting SVG circle and text elements. The code uses d3.scaleOrdinal for color and radius mapping, selection joins with enter/merge/exit patterns, and d3.transition for smooth updates. Three timed steps trigger data mutations, including pop, type replacement, and filtering.

AI-generated description

MIT Licensed

Similar vizzes

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

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

93% match

Loading thumbnail…

Bowl of Fruit

A bowl of fruit starts with five apples, then changes over time as apples are eaten and one apple is replaced by a lemon. The visualization shows how D3.js handles dynamic data updates by animating circle positions, radii, and colors. The code uses `d3.select`, `d3.range`, and custom scale functions like `d3.scaleOrdinal` to map fruit types to colors and sizes. The D3 `transition` API animates the removal, addition, and modification of circles as the dataset shifts through timed `setTimeout` events.

Wwieswies

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

92% match

Loading thumbnail…

Bowl of Fruit - D3 Update

This example demonstrates a dynamic fruit bowl visualization, where colored circles representing apples, lemons, and oranges enter, exit, and change type over time. It showcases D3’s data-join pattern with key functions, using `selection.data()`, `.enter()`, `.merge()`, and `.exit()` to handle updates. The code applies smooth `transition()` animations for position, radius, and fill color, mapping fruit types to colors and sizes via `scaleOrdinal`. SVG circles are rendered in an HTML page using D3 v7, with data mutations triggered by timed `setTimeout` calls.

Hhenryspradlin

92% match

Loading thumbnail…

Bowl of Fruit

D3.js renders an animated bowl of fruit where apples and lemons appear, transform, and disappear in a circular arrangement. The visualization demonstrates the general update pattern: entering elements fade and scale in, updating elements shift positions, and exiting elements shrink and fade out. Clicking a fruit highlights it with a black stroke. The code uses `scaleOrdinal` for color, radius, and font sizing, `transition().duration()` for animation, and data joins on `g` elements. Fruits are generated randomly and mutated through timed `setTimeout` events.

Aala-wahibi

92% match

Loading thumbnail…

Bowl of fruit

This example shows a dynamic visualization of a bowl of fruit, where apples and lemons are represented as colored circles that animate in response to data changes. The visualization demonstrates data joins and transitions using D3 v5 within a React framework, rendering to SVG with animation. The code uses `d3.scaleOrdinal` to map fruit types to colors and sizes, `selection.enter()`, `merge()`, and `exit()` to manage elements, and `.transition().duration(1000)` to animate position and radius changes. Users can click the SVG to double the displayed data values, while timers trigger the removal of fruits and type changes.

SStacyLeson

92% match

Loading thumbnail…

fruit bowl

This example demonstrates animated transitions of fruit in a bowl, showing apples and lemons as circles that move, resize, and disappear over time. The visualization uses D3.js scaleOrdinal functions for color and radius mapping, with a custom fruitBowl function handling the SVG circle elements via selection, enter, merge, and exit transitions. The code animates changes over a 6-second sequence, including removing an apple, changing an apple to a lemon, and filtering the fruit array.

YYashodhaMagadi

92% match