Skip to main content
SimilarExport ZIP
100%

Let's make a face with D3.js!

✓ Published2🌍 Public
Eemntd
Last edited Oct 18, 2019
Created on Oct 17, 2019

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.

AI-generated description
MIT Licensed

Similar vizzes

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
96% 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
96% match
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
94% 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 face with D3.js

Five colored circles represent fruits in an SVG chart, using red for apples and yellow for lemons with distinct sizes. On mouseover, a circle animates its radius and adds a black stroke using d3 selection transitions. The visualization updates over time, removing an apple and converting one to a lemon via setTimeout, demonstrating d3’s data join with enter, update, and exit methods.

DDavid Sjoberg
93% match
Loading thumbnail…

Let's make a face with D3.js

This example demonstrates a simple animated face made from D3.js circles, where fruits represent facial features. It shows five apples initially, then removes one apple and changes another into a lemon, updating the circle sizes and colors accordingly. Using D3 v5 APIs like `d3.range`, `d3.scaleOrdinal`, and selection methods like `selectAll`, `enter`, `merge`, and `exit`, it dynamically redraws the SVG circles in response to data changes. The visualization uses ordinal color and radius scales to map fruit types to red or yellow hues and varying sizes.

GGeolffrey S Mena
93% match
Loading thumbnail…

Let's make a face with D3.js

This example demonstrates a dynamic fruit bowl visualization rendered as SVG circles, showing five apples that shrink to four and transform one into a lemon through timed transitions. The code uses D3.js v5 selection methods (`selectAll`, `enter`, `merge`, `exit`) with the `fruitBowl` module applying ordinal scales for color and radius via `scaleOrdinal` from d3. Data updates occur through `setTimeout` callbacks in `index.js`.

GGeolffrey S Mena
92% match