Fork of haha

Fork of haha

Five apples appear in a bowl, then the example animates a series of changes: one apple is removed, a second apple turns into a lemon, another apple disappears, and a third becomes a lemon. Each fruit is an SVG circle, with color and size determined by a `scaleOrdinal` color scale and radius scale. The D3 code uses `select` for DOM selection, `.transition()` with a one-second duration to animate attribute changes, and mouseover/mouseout events that call `onClick` to highlight the selected fruit with a yellow stroke.

Llinyyyyyyyyy

Fork of bowl of fruit

This example demonstrates animated transitions of fruit shapes in an SVG bowl using D3 v5. Circles representing apples and lemons enter, update, and exit with sequential timing, showing how data joins and key functions track object identity. The code uses `d3.scaleOrdinal` for color and radius mappings, `d3.selectAll` and `selection.merge` for enter-update handling, and `transition.duration` to animate circle positions and radii over one second. Fruits are stored as an array with random IDs, and `setTimeout` triggers state changes like removing or replacing items.

Fork of bowl of fruit

This example demonstrates D3.js data joins by rendering a bowl of fruit as SVG circles that update over time. A row of five apples initially appears, then one apple is removed, and another is replaced with a lemon, triggering enter, update, and exit selections. The `render` function uses `selection.selectAll('circle')`, `.data()`, `.merge()`, and `.exit().remove()` to handle dynamic changes, with `scaleOrdinal` mapping fruit types to colors and radii.

Fork of Fork of bowl of fruit

A fruit bowl renders five apples as red circles with labels on an SVG canvas. D3 version 5 uses data joins with enter, update, and exit selections to animate transitions: an apple disappears after one second, the third apple turns into a lemon after two seconds, and another apple is removed after three. The `fruitBowl` function uses `scaleOrdinal` for color and radius mappings, while circles and text elements update their positions and attributes dynamically.

Bowl of Fruit - Forked

A fork of the "Bowl of Fruit" example animates a changing dataset of apples and lemons over time. Circles and text labels are bound to a JavaScript array using D3's data join, with `scaleOrdinal` mappings for color and radius. Timed `setTimeout` calls remove fruits or change one apple to a lemon, triggering re-renders of the SVG via the `fruitBowl` function. The example demonstrates D3 v5's enter, update, and exit selections for dynamic data.

Ssakhabutdinov

Fork of Fork of Bowl of fruit - Click to Select D3.js!

Five circles render as apples and lemons in an SVG bowl, with clicks selecting a fruit by highlighting its black stroke. D3.js v5’s `scaleOrdinal` maps fruit types to colors and radii, while `transition().duration(1000)` animates circle entry, exit, and resizing. The `fruitBowl` module uses data joins, `on('click')` handlers, and timed `setTimeout` calls to dynamically add, remove, or mutate fruit data, triggering re-renders.

CCarloWK1202

Fork of bowl of fruit

A fork of a fruit bowl demonstrates animated data joins in D3 version 5, showing apples and lemons as colored circles with labels that transition when fruits are eaten or replaced. The visualization uses `d3.scaleOrdinal` for color and radius mapping, and employs `selection.data` with key functions, `enter`/`merge`/`exit` patterns, and `transition` with a one-second duration to smoothly update positions and sizes. SVG rendering updates at timed intervals, removing apples, swapping one for a lemon, and filtering based on index.

Fork of Bowl of Fruit - Animated Transitions

A fork of the Bowl of Fruit example demonstrates animated transitions for five SVG circles representing apples and lemons, with click-to-select highlighting. The visualization uses a D3 v5 `scaleOrdinal` for color and radius, and `transition().duration(1000)` to animate circle position, radius, and exit/enter states. The `fruitBowl` function binds data with a key function, merging enter and update selections, while `index.js` mutates the fruit array via `setTimeout` to show data-driven changes.

Hhuizrh