nachik

@nachik·2 public vizzes

Fork of Bowl of Fruit - General Update Pattern

This example demonstrates the general update pattern for data joins with animated transitions. A row of five apples transitions through updates: one fruit is removed, a fruit changes from apple to lemon, and another apple is deleted. The visualization uses D3 v6’s `selection.data` with a key function, merging enter and update selections, while exit selections shrink to zero radius before removal. Circles are rendered as SVG elements, with color and radius determined by ordinal scales, and transitions animate position and size over 1000 milliseconds.

Jan 22, 2021

Loading thumbnail…

Fork of Bowl of Fruit - General Update Pattern

This example demonstrates the general update pattern for data joins in D3, showing how enter, update, and exit selections handle changing fruit data over time. A bowl of apples shrinks as fruits are removed, and one apple transforms into a lemon. The code uses `selection.data` with a key function, `enter.append`, `merge`, and `exit.transition` to animate circles with `transition.attr` over one second. It relies on `scaleOrdinal` for color and radius, with `setTimeout` triggering three sequential render calls in D3 v6.

Jan 22, 2021