Skip to main content
SimilarExport ZIP
100%

D3 Nested & Independent General Update Pattern

✓ Published0🌍 Public
Vvaporpin
Last edited Oct 23, 2020
Created on Oct 23, 2020

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)`.

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

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
94% 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
92% match
Loading thumbnail…

D3 Starter - General update pattern Nest grouped version

This example demonstrates the D3 general update pattern with a nested group structure, showing how a data array of fruit items maps to SVG circles and text labels. The data starts with five apples, then animates through a lemon replacing an apple, and two apples being removed, all at one-second intervals. Using `d3.select` and `d3.range`, the `fruitBowl` function appends `<g>` groups, merging enters and updates, while exits are removed. It uses ordinal scales for color and radius based on fruit type, rendering with SVG.

Mmaxthamt
88% match
Loading thumbnail…

General Update Pattern / Nested

This example demonstrates the general update pattern for nested data structures by animating a bowl of fruit over time. The visualization renders a row of apples and lemons as SVG circles with labels, updating the scene through sequential JavaScript timeouts that remove, replace, and filter elements from the fruit array. The code uses d3’s selection methods such as `data()`, `enter()`, `merge()`, and `exit()` to manage the lifecycle of grouped elements, along with `scaleOrdinal` for mapping fruit types to colors and radii.

PPabloReyesBetanzo
88% match
Loading thumbnail…

General Update Pattern

This example demonstrates the general update pattern in D3, using a fruit bowl visualization of apples and lemons. The code renders SVG circles with positions and radii determined by ordinal scales, and animates changes over time. Using `selection.join`-style logic with `enter`, `merge`, and `exit` selections, it handles data updates where fruits are added, removed, or change type. React serves as the framework, while D3 v6 drives the transitions and data binding, with each fruit assigned a unique ID via `Math.random()` for stable keying.

Ssravaniboggaram
87% 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
87% match
Loading thumbnail…

Bowl of fruits- General Update Pattern(Nested Version)

This example demonstrates D3’s general update pattern with a nested data join, showing how to manage entering, updating, and exiting groups of fruit shapes. The visualization renders a row of apples and lemons as SVG circles with labels, animating changes over time as fruits are eaten or replaced. The code uses `d3.selectAll` with `data()`, `.enter()`, `.merge()`, and `.exit()` to handle the three states, while `scaleOrdinal` maps fruit types to colors and radii. A `transition()` animates radius adjustments, and `setTimeout` triggers dynamic updates to the dataset.

Bblubanguy
87% match
Loading thumbnail…

D3 General Update Pattern (Singular Elements)

This example demonstrates the D3 general update pattern with singular SVG elements by animating a fruit bowl's contents. It uses `d3.select`, `d3.range`, and `d3.scaleOrdinal` to manage a dynamic dataset of apples and lemons. The visualization sequentially removes, replaces, and filters fruit items in the bowl, showing how `selection.selectAll`, `.enter()`, `.merge()`, and `.exit()` handle transitions for the appended circles, text labels, and the background rectangle. The code explicitly shows data-driven updates through timeouts in `index.js`.

Ccaedcagt76@gmail.com
87% match