Skip to main content
SimilarExport ZIP
100%

Bowl of fruit

✓ Published0🌍 Public
Lloicvdk
Last edited Aug 12, 2020
Created on Jul 27, 2020
Forked from Bowl of fruit

This example shows three buttons labeled "Today," "This week," and "This month" inside a rounded rectangular bowl. Clicking a button updates its fill color from a bright green to a darker shade. The visualization demonstrates d3's data join concept by explicitly handling the enter, update, and exit states for both SVG groups and their child elements. It uses `scaleOrdinal` for colors and a custom `radiusScale`, while positioning elements with an `attr` transform based on their index.

AI-generated description

/* When we call selectAll and data, we create a "data join", we join data (in this case our 5 apples (array) and some elements (DOM elements in this case: our circle)

We have 3 case > Enter : we only have data, no elements

Update : we have both data and elements Exit : we only have elements but no data

In d3 we need to explicitly call thos 3 functions (.enter, .update, .exit)

selectAll give the elements part, .data give the data (always an array)

thanks to that d3 know exactly how much element are on the enter, update and exit */

MIT Licensed

Similar vizzes

Loading thumbnail…

Bowl of Fruit - Click to Select

This example shows a bowl of fruit as a set of colored circles that users can click to select, with a black outline highlighting the chosen piece. The visualization uses D3 v5’s selection API, `scaleOrdinal` for color and radius mapping, and chained transitions to animate the circles’ entry, exit, and size changes over 1000 milliseconds. Data is generated randomly, and the sequence demonstrates adding, removing, and modifying fruit items, with apples and lemons rendered in red and yellow.

LLongYuu
85% match
Loading thumbnail…

Bowl of Fruit - Click to Select

This example shows a dynamic bowl of fruit where clicking a circle selects it, highlighting it with a black stroke. The visualization uses D3 v5's selection API and ordinal scales to map fruit types to colors and radii, with SVG circles entering through a zero-radius transition and exiting by shrinking. The code demonstrates animated data updates, including removing a fruit, changing an apple to a lemon, and filtering the array, all with 1000-millisecond transitions. The implementation uses `scaleOrdinal`, `selection.selectAll`, and `transition().duration()` to manage the stateful rendering.

BBazarbayevManas
85% match
Loading thumbnail…

Bowl of Fruit - Click to Select

This example shows a dynamic bowl of fruit where clicking a circle selects it, highlighting it with a black stroke. The visualization uses D3 v5's selection API and ordinal scales to map fruit types to colors and radii, with SVG circles entering through a zero-radius transition and exiting by shrinking. The code demonstrates animated data updates, including removing a fruit, changing an apple to a lemon, and filtering the array, all with 1000-millisecond transitions. The implementation uses `scaleOrdinal`, `selection.selectAll`, and `transition().duration()` to manage the stateful rendering.

BBazarbayevManas
85% match
Loading thumbnail…

Bowl of Fruit - Click to Select

The visualization shows a bowl of fruit where individual apples and a lemon can be clicked to select them, highlighting the chosen fruit with a thick black stroke. The fruit bowl updates over time as apples are removed or replaced, demonstrating data join transitions. Built with d3.v5, the example uses `scaleOrdinal` for color and radius mapping, SVG groups for positioning, and event handlers on circles for click interactions.

MMiish84
85% match
Loading thumbnail…

Bowl of Fruit

A bowl of fruit visualizes a small dataset of fruits as colored circles, with apples in red and lemons in yellow. The example demonstrates enter, update, and exit selections in D3 v6, using `scaleOrdinal` for both color and radius. As the animation progresses, fruits are removed from the array and types change, triggering corresponding SVG circle updates via the `fruitBowl` module. The rendering relies on plain SVG elements and a React-based scaffold.

Mmbergevoet
84% match
Loading thumbnail…

Bowl of fruit

Five fruit shapes sit in a row as SVG circles and labels, using d3.scaleOrdinal to map apple and lemon types to distinct radii and colors. Clicking a fruit highlights it with a black stroke. Over time, d3 transitions remove fruits, change an apple into a lemon, and filter out another, demonstrating data joins with enter, update, and exit selections.

AAbishek-Dulal
84% match
Loading thumbnail…

Bowl of fruit - Click to select

A bowl of fruit displays colored circles representing apples and lemons, with an animated sequence of removals and a type change. Clicking a fruit selects it by adding a black stroke. The visualization uses d3.scaleOrdinal for color and radius mappings, builds groups with circles and text labels, and updates incrementally via setTimeout. The SVG rendering is generated through d3.select and d3.range, with event handling via `.on('click')`.

Ppkcesar
84% match
Loading thumbnail…

Bowl of fruit - click to select

A bowl of fruit demonstrates a join-based update pattern in D3 v5. Circles represent apples and lemons, scaled by fruit type via `scaleOrdinal`, with the selected fruit highlighted by a black stroke. Clicking a circle triggers a callback that updates the selection and re-renders the visualization. Transitions animate new circles growing from radius zero, exiting circles shrinking away, and position changes over one second. The example uses `selection.data`, `.enter()`, `.merge()`, and `.exit()` to manage enter, update, and exit states, with SVG rendering and an animation showing data changes over time.

TTimothy sit
84% match