Skip to main content
SimilarExport ZIP
100%

Fruit bowl to be

✓ Published0🌍 Public
Wwieswies
Last edited Apr 1, 2022
Created on Apr 1, 2022

Five apples appear in a row, then one disappears after a second, and one apple turns yellow to become a lemon. The example demonstrates basic D3.js data joins with `selection.selectAll`, `enter`, and `exit` methods, using `scaleOrdinal` for color mapping. It renders SVG circles sized by a fixed radius, with transitions triggered by `setTimeout` calls that modify the underlying `fruits` array before re-rendering.

AI-generated description

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

MIT Licensed

Similar vizzes

Loading thumbnail…

Making a bowl of fruit

Five apples appear in a row, then one exits and another becomes a lemon. This D3.js example demonstrates the general update pattern through chained `selection.join` methods without using `join`, instead applying `enter`, `merge`, and `exit` to handle data changes. It uses `scaleOrdinal` for fruit colors and radii, and `setTimeout` to trigger pop and type-change mutations. The SVG circles are positioned with fixed `cx` values and a static `cy`, with the exiting fruit turning black before removal.

NNoWizards
93% match
Loading thumbnail…

Bowl of fruit!

Five apples are displayed as red circles with labels, arranged horizontally across the screen. After one second, the last fruit is removed; a moment later, the third apple changes to a yellow lemon with a smaller radius. The example uses d3-selection with data joins to bind an array of fruit objects to SVG groups, circles, and text elements. The `scaleOrdinal` function maps fruit types to color and radius values, while `setTimeout` calls trigger the sequential updates.

Yylzami40
93% match
Loading thumbnail…

bowl of fruit

A bowl of fruit displays five red apples as circles in an SVG, then demonstrates D3.js data joins by removing one apple after a second and turning another into a yellow lemon after two seconds. Using d3.select, d3.range, and scaleOrdinal, the code binds an array of fruit objects to circle elements, handling enter, update, and exit selections with merge and remove methods. The color and radius scales map fruit types to visual properties, showing how D3 manages dynamic DOM updates.

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

Bowl of Fruit - General Update Patter

Five apples appear in a row as red circles, then one disappears when the data array shrinks, and a later apple turns yellow to become a lemon. The example demonstrates the D3 general update pattern using `selection.enter()`, `selection.exit()`, and the merge of new and existing elements. It uses `d3.scaleOrdinal` for color and radius mappings based on fruit type, with `setTimeout` calls to trigger the data changes. Rendering targets an SVG canvas via D3 v5.

IImmaculata-Mary Muoghalu
92% 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

A bowl of fruit demonstrates data joins in D3.js v5 by rendering five circles as apples, then updating the visualization over time as one apple is removed and another becomes a lemon. The SVG circles are bound to an array of fruit objects using `selection.selectAll`, `data`, `enter`, `merge`, and `exit`. D3 scales, `scaleOrdinal`, map fruit types to fill colors and radii, while `setTimeout` triggers re-renders to show enter, update, and exit transitions.

Jjlspangl
91% match
Loading thumbnail…

Bowl of fruit - General update pattern

Five red apples appear in a row, then disappear one by one. After a moment, the middle apple turns into a yellow lemon, demonstrating a general update pattern with enter, update, and exit selections. Using d3.v6 with SVG, the example applies d3.scaleOrdinal for both fill color and radius, binding fruit data to circles, and merging selections on each render. The code explicitly calls `selection.enter`, `.merge`, and `.exit` to manage the transition from five apples to four apples to four mixed fruits.

Kkhuton
91% match