About fruits

100%

✓ Published1🌍 Public

Last edited Jun 13, 2020

Created on Jun 3, 2020

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.

AI-generated description

MIT Licensed

Similar vizzes

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

95% match

Loading thumbnail…

About fruits

This example shows how a data join animates changes to a fruit bowl. Five apples are initially rendered as circles, then one is removed, another transforms into a lemon, and a third is eaten, all with smooth transitions. Using D3's `select`, `range`, and `scaleOrdinal`, the `fruitBowl` function manages circle enter, update, and exit states via `.transition().duration(1000)`, animating radius and position. The SVG output is updated dynamically as JavaScript timeouts trigger the re-rendering.

WWhitney Hung

92% match

Loading thumbnail…

Fruit bowl to be

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.

Wwieswies

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

91% match

Loading thumbnail…

Bowl of Fruit - Click to Select

A bowl of five apples renders as red circles in an SVG, with each fruit labeled by type. The visualization demonstrates data joins through timed state changes: one apple disappears, another becomes a lemon, and a third is removed. The code uses D3 v5 with modular functions `fruitBowl` and scales from `scaleOrdinal` for color and radius, updating circles and text via enter/update/exit selections.

Bben-chin-43

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

91% match

Loading thumbnail…

Bowl of fruit

An SVG bowl of fruit shows five apples rendered as red circles, with two scheduled updates: one apple is removed after a second, and another apple turns into a lemon (yellow, smaller) after two seconds. The visualization uses d3-selection to bind and update circle elements, d3-scaleOrdinal for color and radius mappings, and d3-range to generate the initial fruit array. Data updates trigger enter, update, and exit selections, demonstrating a basic data join pattern in D3 v5.

Kkaviya-ds

91% match

Loading thumbnail…

Bowl of Fruit - Click to Select

Five apples are rendered as red circles in an SVG bowl, and a timed sequence demonstrates D3 data joins by eating, replacing, and filtering fruits. Each apple is a circle with a label, positioned via a transform attribute using index-based spacing. The code uses `d3.scaleOrdinal` for color and radius mapping, while `selection.enter` and `selection.exit` manage element updates. The fruit data is an array of objects, and the visualization updates through repeated calls to a `fruitBowl` render function.

Xxychen0612.cs09@nycu.edu.tw

91% match