Let's make a face with D3.js

100%

Let's make a face with D3.js

✓ Published0🌍 Public

Last edited Jul 2, 2020

Created on Jul 2, 2020

Forked from Let's make a face with D3.js

A radial face composed of colored fruit circles animates through updates and removals in an SVG scene, demonstrating D3.js join patterns with transitions. The code binds an array of fruit objects to `<g>` elements, using `scaleOrdinal` for color and radius mapping, and transitions each circle's position, fill, and text label over one-second durations. Data changes every second—popping, filtering, and modifying fruit types—triggering enter, update, and exit selections. The example runs in React with d3.v5, using `selection.data`, `groups.enter().append`, and chained `.transition().duration` calls for smooth morphing.

AI-generated description

A bare minimum HTML page.

Similar vizzes

Loading thumbnail…

Let's make a face with D3.js

Fruit shapes in a bowl update over time as D3.js transitions animate their positions, radii, and colors based on type changes. The example uses `scaleOrdinal` to map fruit types to color and size, while `selection.data` with key functions and `transition().duration(1000)` handle enter, update, and exit states. Rendered as SVG circles and text in a React-free setup, it demonstrates dynamic data binding and smooth visual feedback through timed array mutations.

JJake

95% 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!

A face built from D3.js selections animates its eyebrows and changes expression, demonstrating how data-driven DOM updates work with SVG. The example transitions fruit-bowl shapes through enter, update, and exit cycles using `selection.data`, `selection.enter`, `selection.merge`, and `groups.exit().remove()`, with `d3.transition` handling smooth movement. It applies ordinal scales (`scaleOrdinal`) for fruit colors and radii, and dynamic transforms position elements by index. Timers (`setTimeout`) trigger data changes—removing fruits, swapping types, and filtering—to show how state changes render, all rendered as SVG circles and text.

Ccpsshan

92% match

Loading thumbnail…

Let's make a face with D3.js

This example demonstrates D3.js update patterns for animating changes to a fruit bowl. Apples and lemons transition smoothly when fruits are removed or change type, with circles scaling and repositioning over one-second intervals. The `fruitBowl` module uses `scaleOrdinal` for color and radius mapping, while `transition().duration(1000)` animates enter, update, and exit selections. Data binds to SVG groups via `selection.data` with an id-based key function, and JavaScript `setTimeout` triggers the staged modifications.

GGeolffrey S Mena

91% match

Loading thumbnail…

Let's make a face with D3.js!

This example shows a dynamic fruit bowl visualization where fruits appear, disappear, and change type over time, with clickable fruits that become selected and highlighted. Using D3.js v5, the code demonstrates core DOM manipulation through data joins, transitions, and event handling. The `fruitBowl` function leverages `scaleOrdinal` for color and radius mapping, while `selection.enter()`, `.merge()`, and `.exit()` manage enter/update/exit patterns. SVG shapes including circles, rects, and text elements update with staggered transitions triggered by `setTimeout` calls, showing how D3 binds data to visual elements and animates changes.

Jjesramyep1263

91% match

Loading thumbnail…

Let's make a face with D3.js!

A bowl of fruit rendered as SVG circles demonstrates data joins with D3.js. The code uses `d3.scaleOrdinal` for color and radius, binding an array of fruit objects to `circle` elements via `selection.data`. After one second, `fruits.pop()` removes the last apple, triggering an exit transition; after two seconds, the third fruit’s type changes to lemon, updating its fill and size. The examples uses `selection.enter`, `merge`, and `exit` patterns to handle updates.

Eemntd

91% match

Loading thumbnail…

Let's make a face with D3.js

A short animated scatterplot demonstrates D3.js update patterns by rendering a bowl of fruit as colored circles that change radius and position over time. Using `d3.scaleOrdinal` for color and radius mapping, the example appends, transitions, and removes circles with `selection.merge` and `transition.duration`. The data array mutates through timed `setTimeout` calls, removing items, changing a fruit’s type from apple to lemon, and filtering out a selection, all while the SVG updates smoothly with enter, update, and exit selections.

GGeolffrey S Mena

91% 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

90% match