Hey there, fruity nesty!

100%

Hey there, fruity nesty!

✓ Published0🌍 Public

Last edited Jan 14, 2020

Created on Jan 13, 2020

A fruit bowl holds five apples rendered as SVG circles, which shrink as apples are eaten and transform one apple into a lemon over time. The example uses d3-v5 with `scaleOrdinal` for color and radius mapping, and demonstrates data joins via `selection.merge` and exit/remove patterns. State changes trigger re-renders through `fruitBowl`, showing how nested groups animate position and size for each fruit type.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Hey there, fruity!

Five apples appear as red circles in an SVG bowl, then shift through a sequence of updates: one disappears, another turns yellow and shrinks into a lemon, and a third is removed. The D3 data join uses `selection.enter`, `merge`, and `exit` with inline transitions, while `scaleOrdinal` maps fruit types to colors and radii.

OOhayouKaminari

91% match

Loading thumbnail…

Bowl of fruit nested

Five apples render as red circles in an SVG bowl, then an apple is removed, one turns lemon yellow, and another is deleted in timed steps. The example shows D3.js data joins with key functions, using `selection.enter` and `selection.exit` to update groups and circles. `d3.scaleOrdinal` maps fruit types to colors and radii, while a `fruitBowl` function encapsulates the nested join logic.

MMatan

91% match

Loading thumbnail…

Bowl of Fruit - Nested

Five apples render as nested SVG circles in a row, their size and color mapped by `d3.scaleOrdinal` to fruit type. The code uses the `fruitBowl` module to draw circles and labels with `.enter()`, `.merge()`, and `.exit()` transitions. Timed actions mutate the `fruits` array, removing one apple, replacing another with a lemon, and filtering out a third, demonstrating incremental updates to the DOM.

HHe Jianfeng

91% match

Loading thumbnail…

Hey there, fruity hovery selecty!

A fruit bowl of five apples and one lemon demonstrates interactive selection and dynamic data updates with animated transitions. D3.js binds circles to fruit data, using ordinal scales for color and radius, while mouseover and mouseout events set a selected fruit ID that triggers a stroke highlight. The `fruitBowl` function manages enter, update, and exit selections, animating circle radii and positions over 1000 milliseconds as fruits are removed or type-changed.

OOhayouKaminari

90% match

Loading thumbnail…

About fruits

Five apples are arranged in an SVG bowl, then one is removed, one is replaced by a lemon, and another is removed in sequence. Animated transitions move each fruit horizontally and resize it according to its type using `d3.scaleOrdinal` color and radius scales. The `fruitBowl` function handles data joins with `.enter()`, `.merge()`, and `.exit()`, using d3's `.transition()` for morphing.

WWhitney Hung

90% match

Loading thumbnail…

Bowl of fruit General Nested Elements

A bowl of five apples renders as circles inside a rounded rectangle, with each fruit labeled by type. Over time, the animation removes apples, changes one apple into a lemon, and filters out another, demonstrating how nested SVG elements (groups, circles, text) update through D3's selection and merge APIs. The visualization uses D3 v5’s `scaleOrdinal` for color and size scales, and animates radius transitions with `.transition().duration(1000)`. The code relies on general element nesting with `selectAll` and enter/exit patterns, driven by a timer that mutates the fruit data array.

DDaniel García

89% match

Loading thumbnail…

About fruits

Five apples render in an SVG bowl, then update through timed data joins: one apple disappears, another becomes a lemon, and a third is removed. The fruit bowl chart uses d3-selection’s `enter` and `merge` methods to bind fruit objects to groups containing circles and text labels. `d3.scaleOrdinal` maps fruit types to colors and radii, with the code drawing from d3.v5.

WWhitney Hung

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

89% match