Bowl of fruit

Bowl of fruit

A bowl of fruit depicts five apples as circles, which are eaten, replaced by a lemon, and otherwise removed over time, with each change animated via a one-second transition. The visualization uses D3 v6 with data joins and merge to update SVG circle elements, while ordinal scales map fruit types to colors and radii. The React framework wraps this D3 code, with SVG rendering driven by timed state changes.

CChinzorigt Ganbat

Bowl of Fruit

A bowl of fruit starts with five apples, then changes over time as apples are eaten and one apple is replaced by a lemon. The visualization shows how D3.js handles dynamic data updates by animating circle positions, radii, and colors. The code uses `d3.select`, `d3.range`, and custom scale functions like `d3.scaleOrdinal` to map fruit types to colors and sizes. The D3 `transition` API animates the removal, addition, and modification of circles as the dataset shifts through timed `setTimeout` events.

Wwieswies

PPedro Ernesto Tramontina

Bowl of fruit

A bowl of fruit uses D3 v5 to render a row of apples and lemons inside a rounded rectangle, updating as fruits are added, removed, or replaced over time. The visualization relies on ordinal color and size scales to map fruit types to red and yellow circles of varying radii, while SVG groups and circles are joined to data using selection.enter and merge patterns. Shape transitions are driven by timed intervals that pop, filter, and mutate the fruit array.

Bowl of Fruit

Five fruit circles represent apples and lemons in an animated bowl. The visualization uses a D3 v5 data join to update the SVG, with fruits appearing, disappearing, and changing type over timed intervals. A scaleOrdinal color scale maps apples to blue and lemons to yellow, while another scale assigns radii of 50 and 30 pixels. The code transitions the circle radius property over one second for entering and exiting elements.

AAtrayeeDeb

Bowl of Fruit

A bowl of fruit shows five apples animated with D3 transitions, responding to mouseover by highlighting the selected fruit with a black outline. Over time, apples are consumed and one transforms into a lemon, changing both color and radius via d3.ordinal scales. The visualization uses d3 v5 with SVG rendering, binding data by unique ID to handle enter, update, and exit selections smoothly. Temperature timestamps from a CSV file drive the timing of these fruit transformations.

HHirsh Gupta

Bowl of Fruit - Click to Select

A bowl of fruit shows five apples in a rounded rectangle, with smooth animated transitions as fruits are removed, a lemon replaces one apple, and another apple exits. Each fruit is a circle colored by type and sized by a d3.scaleOrdinal, with a click handler that toggles a black stroke on the selected fruit. The visualization uses D3 v5 with data joins, enter/update/exit patterns, and transition durations to animate position, radius, and fill changes in SVG.

EEdward-Elric233

Bowl of fruits

A dynamic SVG visualization renders a changing bowl of fruits using D3 v5's data-join pattern. Five apples appear initially, then the code removes one fruit, converts another to a lemon, and filters out a third over timed intervals. The fruitBowl module applies `scaleOrdinal` for color and radius, mapping apples to red circles and lemons to yellow ones. Circles enlarge on hover via CSS, showing interactive feedback.

Vvladvaculin

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