Skip to main content
SimilarExport ZIP
100%

Let's make face with D3.js

✓ Published0🌍 Public
DDavid Sjoberg
Last edited Nov 26, 2019
Created on Nov 26, 2019

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.

AI-generated description
MIT Licensed

Similar vizzes

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!

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
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 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
92% 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
92% 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
Loading thumbnail…

Let's make a face with D3.js!

This example demonstrates DOM manipulation with D3.js by rendering five colored circles representing fruit, then updating the visualization over time. It shows how `d3.select`, `d3.range`, and `scaleOrdinal` map fruit types to fill colors and radii, with circles initially positioned using hard-coded attributes. The code then uses `setTimeout` to remove a circle after one second and change a circle’s type from apple to lemon after two seconds, triggering updates through a custom `render` function that handles enter, merge, and exit selections. The example is rendered as SVG in a 960×500 viewport.

Kkevgammer689
92% match