Skip to main content
SimilarExport ZIP
100%

Let's make a face with D3.js!

✓ Published2🌍 Public
RRoger Yu-Hsiang Lo
Last edited Feb 8, 2020
Created on Feb 6, 2020

A sequence of animated circles demonstrates the D3.js transition API as five apples shrink, disappear, and transform into a lemon over four seconds. The example uses `d3.select`, `d3.range`, and a custom `fruitBowl` module with `selection.transition().duration(1000)` to smoothly interpolate circle radii, x-positions, and fill colors. Data modifications—removing array elements and changing a fruit type—trigger re-renders, while `d3.scaleOrdinal` maps fruit types to colors and radii. The SVG output is updated incrementally at one-second intervals.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Let's make a face with D3.js!

Five apples and a lemon transition in and out of a fruit bowl, rendered as animated SVG circles with labels using D3.js v5. The example demonstrates data joins and enter, update, and exit transitions, with `scaleOrdinal` mapping fruit types to colors and radii. A `setTimeout` sequence removes, mutates, and filters fruit objects, triggering smooth 1-second transitions that resize, recolor, and reposition each group.

Ffloresh
94% match
Loading thumbnail…

Let's make a face with D3.js!

A dynamic SVG scene of fruit circles arranges as a face-like bowl, with apples and lemons changing position, size, and color through animated transitions. Using D3 v5’s `scaleOrdinal` for color and radius mapping, the example demonstrates data joins with `enter`, `merge`, and `exit` selections, applying `transition().duration(1000)` to animate circle attributes. Clicking a circle highlights it with a black stroke via a `selectedFruit` callback. Over time, `setTimeout` removes fruits and mutates one apple into a lemon, showcasing live updates.

Ccpsshan
93% match
Loading thumbnail…

Let's make a face with D3.js!

Five fruit circles animate in and out of an SVG bowl as apples are eaten and one apple transforms into a lemon. The example demonstrates D3.js v6 data joins with enter, update, and exit selections, using `scaleOrdinal` for color and radius, and `transition().duration(1000)` to smoothly resize and remove circles. `setTimeout` triggers sequential state changes, showing how reusable chart functions like `fruitBowl` respond to changing data arrays.

LLidiamir
93% match
Loading thumbnail…

Let's make a face with D3.js

This example demonstrates how D3.js data joins and transitions can create an animated fruit bowl, with apples and lemons that appear and disappear over time. The code uses d3.scaleOrdinal for color and radius mapping, while d3.select and selection.merge handle enter, update, and exit states. SVG circles and text elements render each fruit, and transition().duration() animates position changes and removals. The visualization cycles through three timed updates: removing a fruit, changing one apple to a lemon, and filtering out another item, showing dynamic data binding with the fruitBowl module.

GGeolffrey S Mena
93% match
Loading thumbnail…

Let's make a face with D3.js!

Five pieces of fruit are shown as circles in an SVG, with apples in red and lemons in yellow, and the fruit repositions itself with a one-second transition whenever the data changes. Hovering over a fruit highlights it with a black outline. The example uses D3 v5’s `select`, `scaleOrdinal`, and `transition` APIs to build an animated, interactive bowl that removes or replaces fruit at timed intervals.

Eemntd
92% match
Loading thumbnail…

Let's make a face with D3.js!

Five pieces of fruit are shown as circles in an SVG, with apples in red and lemons in yellow, and the fruit repositions itself with a one-second transition whenever the data changes. Hovering over a fruit highlights it with a black outline. The example uses D3 v5’s `select`, `scaleOrdinal`, and `transition` APIs to build an animated, interactive bowl that removes or replaces fruit at timed intervals.

Eemntd
92% match
Loading thumbnail…

Let's make a face with D3.js!

A fruit bowl visualization demonstrates data binding and transitions with D3.js. Rendered as SVG, it shows apples and lemons as circles with color and size scales, positioned along a bowl-shaped rectangle. The code uses `selection.data()`, `enter()`, `merge()`, and `exit()` to update elements, with `transition()` animating position changes. Over time, fruits are removed and one apple changes to a lemon, illustrating dynamic updates. The implementation relies on D3 v5 modules `scaleOrdinal`, `range`, and `select`, with state managed via `setTimeout` in the main script.

Ccpsshan
92% match
Loading thumbnail…

Let's make a face with D3.js!

Five fruit circles animate in a row before the viewer, with apples and lemons distinguished by color and size. Hovering over a fruit highlights it with a black stroke, and fruits are removed or changed over time to illustrate dynamic updates. Built with D3.js v5, the example uses `scaleOrdinal` for color and radius mappings, and `transition().duration()` to animate position, radius, and removal.

Eemntd
92% match