Let's make a face with D3

100%

Let's make a face with D3

✓ Published1🌍 Public

Last edited Mar 7, 2021

Created on Mar 2, 2021

A yellow circle forms a face, with two black eyes and a wide arc-shaped mouth. The eyebrows, rendered as rectangular bars, animate upward and then back down in a looping motion. Built with D3 v6, the visualization uses SVG elements and D3’s `transition()` method to adjust the eyebrow group’s transform attribute over two-second intervals. The face is centered using a translation on a group element, with the mouth created via the `arc()` generator.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Let's make a face with D3.js

A yellow circle with a black outline forms a face, complete with two black eyes, rectangular eyebrows, and a mouth drawn as an arc. The right eyebrow animates upward over two seconds using D3's `transition()` method. The example uses D3 v6 modules `select` and `arc` within an SVG, constructing the face from primitive shapes and positioning them via a centered group transform.

DDICKO Alhassane

95% match

Loading thumbnail…

Let's make a face with D3.js

A yellow circle with a black outline forms a face, complete with two eyes, animated eyebrows, and an arc-shaped mouth. The eyes and eyebrows are simple SVG circles and rectangles, while the mouth uses a path generated by D3's `arc` function. The eyebrows animate via chained `transition` calls, moving down and back up over two seconds each way. The visualization is built entirely with D3 v5, using its `select` and `arc` modules to render and manipulate SVG elements.

Ffredferramenta

95% match

Loading thumbnail…

Let's make a face with D3.js!

A yellow circle with black strokes serves as a face, featuring two eyes, animated eyebrows that move up and down over two-second transitions, and a mouth drawn as an arc. The example demonstrates D3 v5's selection, transition, and arc generators to construct and animate SVG shapes. Eyebrows transition between vertical offsets using `transition().duration()`, while the mouth uses `d3.arc()` with specified inner and outer radii and angular extents. The SVG canvas is centered via a translation transform, and all elements are positioned relative to that origin.

Xxfqx92

95% match

Loading thumbnail…

Let's make a face with D3.js

A yellow circle with black outlines forms a smiling face, featuring two black eyes and rectangular eyebrows that animate upward and then return to their original position. The face is constructed with D3.js v5 using SVG elements, including circles for the face and eyes, rectangles for the eyebrows, and a path generated with the d3.arc() API for the mouth. The eyebrows transition via chained transition().duration() calls on a group element, which shifts their vertical offset by 50 pixels over two seconds before resetting.

CClara Hu

94% match

Loading thumbnail…

Let's make a face

A yellow circle with a black outline forms a face, featuring two black eyes and an arc-shaped mouth drawn using d3.arc. The animation uses D3 transitions to make the left eyebrow move up and down repeatedly, while the right eyebrow remains static. Built with D3 v6, the visualization manipulates SVG elements like circle, rect, and path, with all positioning centered via SVG coordinate transforms.

SSven Wanner

94% match

Loading thumbnail…

Let's Make a face with D3.js

A yellow circle forms a face with two black eyes, eyebrows, and an arc-shaped mouth. The eyebrows animate upward and then back down repeatedly using chained `transition` calls on a `<g>` element. Built with D3 v5, the example selects the SVG, centers a group, and constructs shapes with `circle`, `rect`, and `path` elements. The mouth uses the `arc` generator with specified inner and outer radii and angles, all rendered as static SVG with JavaScript-driven animation.

Kkiyahw1

94% match

Loading thumbnail…

Let's make a face with D3js

A yellow circle face with two eyes and animated eyebrows is drawn using D3.js v7. The code uses `select` to target the SVG element, `arc` for the mouth path, and chained `transition().duration()` calls to animate the eyebrows vertically. The construction translates groups via `.attr('transform', ...)` to position facial features relative to the center.

Ppml31780

94% match

Loading thumbnail…

Let's make a face with D3.js

A yellow circle face with black-outlined eyes, eyebrows, and an arc-shaped mouth is drawn using D3.js v5. The SVG elements are centered via a translation transform, and the mouth is created with the `d3.arc` generator. The eyebrows animate up and down using chained `transition().duration()` calls, moving their group container's transform over two seconds each way. The code selects the SVG, sets dimensions from its attributes, and appends all shapes.

GGeolffrey S Mena

94% match