Fruit Bowl nested elements

100%

Fruit Bowl nested elements

✓ Published0🌍 Public

Last edited Dec 29, 2020

Created on Dec 29, 2020

Forked from Bowl of fruit - click to select

This example demonstrates the D3 lifecycle for creating, updating, and removing nested SVG elements by managing a fruit bowl of apples and lemons. It shows how a single selection can synchronize groups, circles, and text labels as the underlying data array changes over time through timed mutations. Using D3 v5’s `select`, `range`, and `scaleOrdinal`, the code dynamically repositions and recolors each fruit’s circle and label, removing or modifying elements when fruits are eaten or replaced. The rendering relies on SVG groups and merge operations for efficient updates.

AI-generated description

Demonstrates fundamental DOM manipulation using D3.js by making a smiley face whose eyebrows move.

MIT Licensed

Similar vizzes

Loading thumbnail…

Bowl of Fruit - Nested Elements

This example demonstrates a nested SVG visualization where circular fruits inside a rounded bowl update dynamically over time. Using D3 v5 and the `fruitBowl` module, elements are bound to a `fruits` array, with apples (red, radius 50) and lemons (yellow, radius 30) encoded through ordinal color and size scales. The code shows incremental changes: removing an apple, altering one apple to a lemon, and filtering out another, showcasing how D3’s selection merging, `.merge()`, and `.exit()` handle transitions. The rendering uses raw SVG `rect`, `circle`, and `text` elements, driven by timer-based state mutations.

JJordan Chiu

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

92% match

Loading thumbnail…

Bowl of Fruit - Nested Elements

This example demonstrates how D3.js can manage dynamic updates to nested SVG elements within a fixed container. Five fruits are initially displayed as colored circles with text labels, representing apples in red and a lemon in yellow, all layered over a bowl-shaped rectangle. Over three seconds, the visualization reacts to data changes: an apple is removed, another apple transforms into a lemon, and a second apple is deleted. The code uses D3’s scaleOrdinal for color and radius mapping, selection merging via `.merge()` to update existing elements, and a simple `setTimeout` sequence to trigger re-renders. The SVG rendering approach is visible throughout the process.

EEllednera

92% match

Loading thumbnail…

Bowl of Fruit - Nested Elements_Singular Elements

A bowl of fruit demonstrates nested SVG elements with singular data joins. Five apples render as red circles inside a rounded rectangle bowl, each group containing a circle and a text label. Over time, the dataset shrinks, one apple changes into a yellow lemon, and another apple is removed. Using `d3.scaleOrdinal` for color and radius, the code performs enter, update, and exit selections via `selection.enter()`, `merge()`, and `exit().remove()` to transition the fruit groups dynamically. The example shows how to manage hierarchical SVG structures with D3 v5.

MMinwoo Pak

92% match

Loading thumbnail…

Bowl of fruits - nested element

This example demonstrates a fruit bowl visualization with nested SVG elements, showing apples and lemons as colored circles with labels. It uses D3.js version 5 with a data join pattern, employing `selection.enter()`, `merge()`, and `exit()` to handle dynamic updates. The code uses `d3.scaleOrdinal` for both color and radius mapping, while `d3.range` generates the initial fruit array. Over timed intervals, the visualization removes fruits, changes a fruit type, and filters elements, showcasing how nested groups and child elements update responsively.

Aaxliao

91% match

Loading thumbnail…

Fruitbowl V2 nesting

This example demonstrates a nested data visualization using D3 v5, where a row of fruit circles—apples and lemons—is rendered and animated within an SVG. The fruitBowl component uses `selection.enter()` and `.merge()` to handle groups, circles, and text elements, with `scaleOrdinal` mapping fruit types to colors and radii. A scripted sequence changes the fruit array over time, triggering re-renders that show the exit, update, and enter transitions, such as removing a fruit or changing an apple to a lemon. The animation is driven by setTimeout calls that manipulate the `fruits` state and invoke the render function.

Iisaachowen

91% match

Loading thumbnail…

Bowl of Fruit: Nested Elements

A nested selection pattern animates a bowl of fruit as apples are eaten and replaced by lemons. D3’s `scaleOrdinal` maps fruit types to circle radii and fill colors, while data joins with `merge` update group transforms and child circle and text elements. The example uses `d3.select`, `range`, and SVG rendering to show enter, update, and exit behavior.

Bbprokopowicz

91% match

Loading thumbnail…

Bowl of Fruit - Nested

A nested selection pattern updates a bowl of fruit rendered as SVG circles and text labels. The visualization starts with five apples, then sequentially removes one fruit, swaps an apple for a lemon, and filters out another apple. D3’s `scaleOrdinal` maps fruit types to colors and radii, while `selection.enter` and `selection.merge` manage entering and updating elements. The code uses `d3.select`, `d3.range`, and generic SVG `circle` and `text` elements.

CChristine Lanser

90% match