Let's make a face with D3.js!

100%

Let's make a face with D3.js!

✓ Published1🌍 Public

Last edited Jul 15, 2019

Created on Jul 15, 2019

Forked from 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.

AI-generated description

Demonstrates fundamental DOM manipulation using D3.js by making a smiley face whose eyebrows move.

MIT Licensed

Similar vizzes

Loading thumbnail…

Let's make a face with D3.js!

This example demonstrates how D3.js can build an interactive smiley face by manipulating SVG elements, with animated eyebrows that move over time. The code uses `d3.select` and `selection.data` to bind fruit-shaped data to SVG circles and text, while `transition.attr` animates their positions and radii. A fruit bowl is rendered as an SVG rectangle, and ordinal scales like `scaleOrdinal` map fruit types to colors and sizes. The face updates through timed intervals that add, remove, or alter data, showcasing D3’s enter, update, and exit pattern.

Ccpsshan

94% match

Loading thumbnail…

Let's make a face with D3.js!

This example demonstrates how D3.js can create a smiling face with animated, moving eyebrows. It shows fundamental DOM manipulation by using `d3.select`, `d3.range`, and `d3.scaleOrdinal` to bind and update data-driven SVG elements. The `fruitBowl` function manages enter, update, and exit selections with `transition().duration()` for smooth changes, while the eyebrow animation is driven by JavaScript `setTimeout` calls that modify the fruit array and re-render.

Rrenjiez

92% match

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

92% match

Loading thumbnail…

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.

JJake

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

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!

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

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

91% match