Skip to main content
SimilarExport ZIP
100%

Object constancy

✓ Published0🌍 Public
Aalobry
Last edited Dec 17, 2020
Created on Dec 17, 2020
Forked from Bowl of fruits

Five fruits sit in a row as colored circles with labels, shifting position when an apple is removed or changed into a lemon. The d3 selection with a key function preserves each fruit’s identity across updates, while `transition().duration()` animates the circle’s radius to zero on exit and slides the remaining fruits to their new slots. `scaleOrdinal` maps fruit type to color and radius, and all rendering uses SVG.

AI-generated description

SVG HTML

Exercice : Add transition!

MIT Licensed

Similar vizzes

Loading thumbnail…

Bowl of Fruit: Object Constancy

Five apples appear in a row, then fade and slide in response to timed data updates that remove fruits or change an apple into a lemon, preserving each circle’s identity via a stable `id` key. The example demonstrates D3’s object constancy pattern by using `selection.data` with a key function, `enter`, `merge`, and `exit` selections, plus chained `transition` calls to animate radius and x-position over one second. Rendering uses SVG circles with d3-color scales for fill and size.

Bbprokopowicz
88% match
Loading thumbnail…

Object Constancy

This example animates a fruit bowl where apples and lemons appear, disappear, and change type while maintaining stable object identity through a general update pattern. The visualization uses D3 v6 with SVG and transition methods, assigning each fruit a unique ID and using ordinal scales for color and radius. The D3 `transition` with a 2000-millisecond duration smoothly moves circles and text to new positions as the data array changes via `pop()`, `filter()`, and type reassignment.

SSharvariPhadke
88% match
Loading thumbnail…

D3 General Update Pattern (Object Constancy)

Five apples appear in a row, then the visualization animates through data changes while maintaining object constancy by keying each circle to a stable `id`. D3’s general update pattern merges entering, updating, and exiting selections, using `transition().duration(1000)` to grow new circles from radius zero, shrink removed ones, and smoothly reposition elements. The `fruitBowl` function applies ordinal color and radius scales to distinguish apples from lemons, while `setTimeout` calls trigger pop, type-swap, and filter operations on the fruit array.

Ccaedcagt76@gmail.com
87% match
Loading thumbnail…

Fruit bowl to be

Five apples appear in a row, then one disappears after a second, and one apple turns yellow to become a lemon. The example demonstrates basic D3.js data joins with `selection.selectAll`, `enter`, and `exit` methods, using `scaleOrdinal` for color mapping. It renders SVG circles sized by a fixed radius, with transitions triggered by `setTimeout` calls that modify the underlying `fruits` array before re-rendering.

Wwieswies
86% match
Loading thumbnail…

About fruits

This example shows how a data join animates changes to a fruit bowl. Five apples are initially rendered as circles, then one is removed, another transforms into a lemon, and a third is eaten, all with smooth transitions. Using D3's `select`, `range`, and `scaleOrdinal`, the `fruitBowl` function manages circle enter, update, and exit states via `.transition().duration(1000)`, animating radius and position. The SVG output is updated dynamically as JavaScript timeouts trigger the re-rendering.

WWhitney Hung
86% match
Loading thumbnail…

Let's make a face with D3.js!

Five fruit circles animate in a row before the viewer, with apples and lemons distinguished by color and size. Hovering over a fruit highlights it with a black stroke, and fruits are removed or changed over time to illustrate dynamic updates. Built with D3.js v5, the example uses `scaleOrdinal` for color and radius mappings, and `transition().duration()` to animate position, radius, and removal.

Eemntd
86% match
Loading thumbnail…

TM

A simple animated fruit bowl demonstrates D3's declarative update and object constancy. Five circles, initially apples, transition through a scripted sequence: an apple is removed, one apple turns into a lemon, then another apple is eaten. D3's `select`, `range`, and `scaleOrdinal` manage the SVG circles and text labels, while `data()` and merge operations ensure smooth updates. The example uses D3 v5 and the `fruitBowl` component, drawing on static, hard-coded data.

Rrenenadorp
86% match
Loading thumbnail…

About fruits

Five apples are arranged in an SVG bowl, then one is removed, one is replaced by a lemon, and another is removed in sequence. Animated transitions move each fruit horizontally and resize it according to its type using `d3.scaleOrdinal` color and radius scales. The `fruitBowl` function handles data joins with `.enter()`, `.merge()`, and `.exit()`, using d3's `.transition()` for morphing.

WWhitney Hung
86% match