no animation pattern

100%

no animation pattern

✓ Published1🌍 Public

Last edited Jan 11, 2021

Created on Jan 11, 2021

Forked from pattern

This example demonstrates a static fruit bowl visualization using D3 v5 and SVG rendering. It maps categorical fruit types (apple, lemon, peach) to ordinal color and radius scales via `scaleOrdinal`, positioning each item along a horizontal row with circles and text labels. The code uses `select`, `range`, and `scaleOrdinal` imports from D3, with local ES6 module imports for the `fruitBowl` function. The dataset is manipulated through a sequence of timed `setTimeout` calls that add, remove, and modify fruit types, triggering redraws without animated transitions, showing how D3's enter/exit/merge patterns handle iterative data changes.

AI-generated description

An example showing the capabilities of VizHub:

Loads D3 via UNPKG.
Demonstrates use of import from "d3".
Demonstrates use of import from local ES6 modules.

MIT Licensed

Similar vizzes

Loading thumbnail…

A bowl of fruit

A bowl of fruit demonstrates animated updates to an SVG circle chart using D3.js v5. Five circles representing apples enter with a scaling radius transition, then shrink and vanish as fruit is consumed, swap from apple to lemon with a color change, and filter out one item. The example uses D3’s `scaleOrdinal` for color and radius mappings, `selection.enter()`, `.merge()`, and `.exit()` with `transition().duration(1000)` to animate circle properties. The data source is a random set of fruit objects generated in the script, rendered as SVG circles with a fixed vertical position and horizontal spacing.

MMatthiasVanCampen

88% match

Loading thumbnail…

pattern

A fruit bowl of circles animates as apples, lemons, and peaches are added, removed, or changed over time. This example uses D3 v5’s `select` and `scaleOrdinal` for colors and radii, with a custom transition to animate circle sizes and positions. The SVG rendering supports the dynamic updates triggered by timed `setTimeout` events, demonstrating data-driven state changes in a declarative D3 workflow.

YYanxxx447

88% match

Loading thumbnail…

Bowl of Fruit- General Update pattern

This example demonstrates the D3.js general update pattern by animating a bowl of fruit, where apples are eaten, replaced with lemons, and removed over time. It uses D3 selections with enter, merge, and exit methods to manage dynamic data binding, rendering SVG circles and text elements via a reusable `fruitBowl` function. The visualization employs `d3.scaleOrdinal` to map fruit types to colors and radii, with the data driven by timed `setTimeout` callbacks that modify a hardcoded fruits array.

SSagar Malviya

88% match

Loading thumbnail…

Bowl of Fruit

This example demonstrates a simple data-driven fruit bowl visualization where apples and oranges are rendered as colored circles with text labels. The code uses d3.scaleOrdinal to map fruit types to colors and sizes, with SVG circles and text elements animated through D3’s enter/update/exit pattern. A timed sequence of snack events (eating an apple or swapping one for an orange) triggers re-renders. The implementation imports specific functions like scaleOrdinal and range from d3, with the fruitBowl module handling the selection joins.

YYifu Chen

87% match

Loading thumbnail…

D3 Bowl of Fruit - With Nested Elements

This example demonstrates dynamic data updates with nested SVG elements, rendering apples and lemons in a rounded bowl shape. The visualization uses d3-selection's enter/merge/exit pattern within a custom `fruitBowl` function, updating fruit positions and styles as the data array changes over timed intervals. The code leverages `d3.scaleOrdinal` for color and radius mappings, and binds fruit data to `<g>` groups containing nested `<circle>` and `<text>` elements. The animation cycles through removing, modifying, adding, and filtering fruits to show how joins handle each change.

Rrdeichert

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

87% match

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

87% match

Loading thumbnail…

fruits

This example demonstrates a dynamic fruit bowl visualization using D3 version 6. It shows circles representing apples and lemons, with colors and radii mapped by fruit type via `d3.scaleOrdinal`. The animation uses D3's selection API and the `.transition()` method to smoothly update positions and sizes over time. Fruits are initially added, then removed, type-changed, and filtered through timed `setTimeout` events, while `selectAll` and `.merge()` manage the enter, update, and exit states of the SVG circles.

Vvictoriokhomas

87% match