Untitled

100%

✓ Published0🌍 Public

Last edited Jan 19, 2021

Created on Jan 19, 2021

Forked from Untitled

A dynamic bowl of fruit demonstrates D3 v6 data joins and transitions. Five circles representing apples render in an SVG, updating as fruits are removed or changed to lemons over timed intervals. Using `selection.data` with key functions, `enter`, `merge`, and `exit` selections animate position, radius, and color via `transition().duration()`. A `scaleOrdinal` maps fruit types to fill colors and radii. Clicking a circle logs to the console, though no visible selection occurs.

AI-generated description

A demonstration of how to start using D3 version 6.

MIT Licensed

Similar vizzes

Loading thumbnail…

Untitled

A bowl of fruit demonstrates animated updates to a D3 data join. Apples and lemons are drawn as circles using `d3.scaleOrdinal` for color and size, with fruits entering, exiting, and changing type over time. The code uses `selection.data`, `merge`, and `transition` to smoothly move, resize, and remove circles. D3 v6 is loaded from a CDN, and the visualization runs on an SVG in a minimal HTML page.

Bbicyclecode

95% match

Loading thumbnail…

Untitled

A D3 v6 demonstration shows a bowl of fruit rendered as SVG circles and text labels, with apples and lemons distinguished by color and size via `d3.scaleOrdinal`. The code uses the general update pattern to handle entering, updating, and exiting elements, animating radius changes with `transition().duration()`. Timed `setTimeout` calls remove fruits, change an apple’s type to a lemon, and filter the array, illustrating how data joins update the visualization.

Bbicyclecode

92% match

Loading thumbnail…

(animated)Bowl of Fruit

Animated fruit circles transition between sizes and positions as apples are removed and one apple becomes a lemon, with hover events highlighting the selected fruit by a black outline. The visualization uses D3 v5 with SVG, binding data to circles via `selection.data()` and key functions. Enter and exit selections animate radius changes through `transition().duration(1000)`, while ordinal scales map fruit types to colors and radii.

ZZY Huang

92% match

Loading thumbnail…

Bowl of Fruit - Click to Select

A bowl of fruit demonstrates D3.js data joins and interactive selection. Five apples render as circles that transition in size and position over time, with one apple morphing into a lemon and others disappearing. Clicking any fruit highlights it with a black stroke. The code uses `selection.data`, `enter`, `merge`, and `exit` with `transition.attr` to animate SVG circles, plus `scaleOrdinal` for color and radius mappings.

AArriannePandaraoan

91% match

Loading thumbnail…

Bowl of Fruit - Click to Select

Five circles representing apples and lemons enter, update, and exit with a smooth one-second transition, using a D3 ordinal scale for color and radius. Clicking a fruit selects it, adding a black stroke. The example demonstrates a data join with `selection.data`, keyed by `id`, and uses `transition().duration(1000)` for animation. Data mutations occur via `setTimeout`, replacing an apple with a lemon and removing fruits.

HHe Jianfeng

91% match

Loading thumbnail…

Bowl of Fruits

A bowl of five apples animates through a sequence of data changes, demonstrating D3’s data join and enter/update/exit pattern. Each circle represents a fruit, with its type determining fill color and radius via ordinal scales. Over time, an apple is removed, a middle apple transforms into a lemon, and another apple is filtered out. The code uses `selection.data`, `merge`, and `transition` to smoothly animate circle radii and positions, while SVG circles are appended, updated, and removed accordingly.

YYasara Peiris

91% match

Loading thumbnail…

Untitled

A bowl of fruit demonstrates the general update pattern for SVG groups in D3 version 6. An array of apples renders as green circles with labels, then a series of timed browser callbacks removes items, replaces an apple with a yellow lemon, and filters the array, showing how enter, update, and exit transitions handle each change. The code uses `selection.selectAll`, `groups.enter()`, and `.merge()` from the `d3` module, with `scaleOrdinal` mapping fruit types to colors and radii.

Bbicyclecode

91% match

Loading thumbnail…

Bowl of Fruit - Click to Select

Five apples and a lemon render as colored circles, with a black outline marking the currently selected fruit. Clicking any fruit selects it, and items animate in and out of the bowl over time as apples are eaten or replaced. The visualization uses D3 v5’s data join with `selection.enter`, `merge`, and `exit` methods, transitioning circle radii and positions via `transition.attr`. An ordinal color scale maps fruit types to specific hex values, while the SVG canvas and its circle elements update dynamically.

Ffbudwill

91% match