Skip to main content
SimilarExport ZIP
100%

TM

✓ Published0🌍 Public
Rrenenadorp
Last edited Aug 21, 2022
Created on Aug 21, 2022

This visualization presents a nested-rectangle chart built with D3 v6, where each fruit type (apple or lemon) is rendered as a group containing a circle, text label, and a variable number of stacked rectangles. The number of rectangles per group is determined by each fruit's "num" property, while their width scales according to the fruit type via a d3.scaleOrdinal color and radius scale. The example demonstrates a nested General Update Pattern, using `selection.each` to isolate each group’s DOM node and apply an independent data join, allowing rectangle counts and sizes to update dynamically as fruits are added, eaten, or replaced.

AI-generated description

A response to a question in the D3 Slack about different numbers of nested rectangles.

Original question by May Tan:

What i'm trying to do is add varying number of rectangles based on "num" in the data. The size of rectangle depends on the type of fruit. I realise that the rect size did update when the apple is changed into a lemon. However rect size didn't update on the last update when apple was eaten. My question is how do I write the selections when the data join is not based on number of array items, but range of some data. I am also sure i'm writing the update part wrongly as the size of rect did not get updated. Thanks for your help!

Answer:

Ahh I see what you mean. You want to essentially "break out" into a new update pattern, within each <g> element, so that each has its own unique data driven collection of rectangles. Here's a solution for it:

const groups = groupsEnter.merge(groupsUpdate);

groups.each(function (d) {
  const innerGroup = select(this);
  const rects = innerGroup
    .selectAll('rect')
    .data((d) => d3.range(d.num).map(() => d));

  rects
    .enter()
    .append('rect')
    .attr('height', '30px')
    .attr('stroke', 'black')
    .merge(rects)
    .attr('y', (d, i) => -40 * (i + 1))
    .attr('width', (d) => radiusScale(d.type));

  rects.exit().remove();
});

The trick is to use selection.each (and the old school function notation to access this) to isolate the DOM nodes for the groups (exposed by D3 as this), then use select to create a new D3 selection for each individual <g> element. With this in hand, we can have another nested but totally independent General Update Pattern, allowing us to make a different number of rectangles for each group.

MIT Licensed

Similar vizzes

Loading thumbnail…

D3 Nested & Independent General Update Pattern

This example demonstrates an animated fruit bowl where apples and lemons are added, removed, and resized, showing how nested groups of rectangles update independently within each fruit group. The code uses D3’s General Update Pattern twice: first to manage the outer `<g>` elements for each fruit, then, inside a `selection.each` callback, to handle the inner rectangles per group via `selectAll('rect')` and `.data()`. The inner rectangles’ width is driven by `radiusScale(d.type)`, while their quantity is set by `d3.range(d.num)`.

Vvaporpin
82% match
Loading thumbnail…

Nested Example

A fruit bowl visualization demonstrates nested selections in D3.js, showing five fruit shapes in a brown bowl that updates over time. Apples appear as red circles, and one changes to a yellow lemon while another fruit is removed. The code uses `selection.selectAll`, `selection.enter`, and `selection.merge` to bind fruit data to SVG groups, with `d3.scaleOrdinal` mapping fruit types to colors and radii. Animated updates occur via `setTimeout` calls that modify the fruits array and re-render the scene.

BBKirst3
82% match
Loading thumbnail…

D3 Nested & Independent General Update Pattern

D3’s nested General Update Pattern manages a variable number of rectangles inside each fruit group, responding to changes in fruit type and count. Apples appear as red circles with wider bars, lemons as yellow with narrower ones; removing a fruit deletes its entire group. The implementation uses `selection.each` to isolate each `<g>` element, then applies the inner update pattern with `selectAll` and `data`, merging enter and update selections via `merge`. SVG rendering handles all visual output, with `scaleOrdinal` mapping fruit types to colors and sizes.

CCurran Kelleher
81% 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
81% match
Loading thumbnail…

Bowl of fruit - General Update Pattern (Nested)

This example demonstrates the general update pattern with nested selections in D3 v5, showing a row of fruit that changes over time as apples are eaten and replaced by lemons. The visualization uses a static SVG bowl rendered from a rect, while fruit groups are bound to array data and updated through enter, merge, and exit selections. The code applies ordinal scales for color and radius to distinguish apple and lemon types, and employs d3.select, scaleOrdinal, and selection methods to manage the transitions.

Ppkcesar
81% match
Loading thumbnail…

Fruit - Update Pattern - Nested

Five fruit icons animate through a sequence of data changes, demonstrating D3's nested update pattern. The visualization shows apples and lemons repositioning, changing color and radius, and being removed from the group over timed intervals. Using d3.scaleOrdinal for color and size mapping, the code applies transitions to enter, update, and exit selections. The example relies on selection.merge, transition.duration, and group elements to synchronize circles with their text labels.

LLudovicGouverneur
81% match
Loading thumbnail…

D3 Nested & Independent General Update Pattern

This example demonstrates a nested General Update Pattern where each fruit group contains an independent, data-driven set of rectangles. The code shows how to use `selection.each` with the old-school `function` notation to access `this`, then create a new D3 selection via `select` for each `<g>` element. This allows a different number of rectangles per fruit, with sizes varying by fruit type. The visualization responds to data changes—adding, removing, and modifying fruits—updating both the outer groups and their inner rectangles through separate update patterns. It renders to SVG using D3 v6.

GGrimsas
80% match
Loading thumbnail…

12.b - fruit bowl - d3 update pattern, nested elements - dataviz 2018

A fruit bowl visualization demonstrates the D3 update pattern with nested elements, showing apples and lemons as circles in a bowl that changes over timed intervals. The code uses d3.scaleOrdinal for colors and radius mapping, with d3-selection’s enter, merge, and exit methods to handle dynamic data updates. An SVG renders the bowl as a rounded rectangle, while each fruit is a group containing a circle and text label. The example includes a deliberate data mutation where an apple becomes a lemon, illustrating how the update pattern reuses existing DOM nodes efficiently.

Zzach b.
80% match