Bowl of fruit - Nested

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

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

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

Bowl of fruit - Nested Elements

A bowl of fruit demonstrates nested SVG elements with a dynamic data join, showing apples and lemons arranged in a row. The visualization uses a D3 ordinal scale to map fruit types to colors and radii, while enter, update, and exit selections manage the transitions as fruits are eaten or replaced over time. Circles and text labels are appended within each group element, and the bowl is drawn as a rounded rectangle behind the fruit.

Hhugomell

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

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

Bowl of Fruit - Nested something

A bowl of fruit illustrates the nested data structures within a D3 visualization. The example uses a D3 v5 `scaleOrdinal` to map fruit types to colors and radii, rendering apples and lemons as circles with labels. The code demonstrates incremental updates to a d3 selection: adding, modifying, and removing fruit items using `selectAll` and `merge`, with the bowl shape created via an SVG `rect` with a rounded corner.

Bbertieip

Bowl of Fruits - Nested elements

A bowl of fruits demonstrates nested SVG elements and data joins in D3.js v5. Rectangular bowls hold circular fruits, with apples and lemons distinguished by color and size through d3.scaleOrdinal scales. The visualization updates over time as fruits are removed and types change, showing enter, update, and exit selections. The code uses d3.select and selection methods like .merge() and .exit().remove() to manage dynamic rendering, with text labels positioned below each fruit.

YYasara Peiris