Let's make a face with d3.js

100%

Let's make a face with d3.js

✓ Published3🌍 Public

Last edited Jun 12, 2020

Created on Jun 12, 2020

A yellow circle with a black outline forms a face, featuring two eyes and a mouth, while the eyebrows animate by shifting downward and then returning upward over four seconds. The example builds an SVG scene using d3.select and d3.append to structure the face from primitive shapes, including d3.arc for the mouth's curved path. The animation relies on chained d3.transition calls with a two-second duration, altering the eyebrow group's transform attribute to create the repeated motion.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Let's make a face with d3.js

A yellow circle with black outline forms a face via SVG. Two black eyes and rectangular eyebrows animate upward and downward in a repeating transition, while an arc-shaped mouth uses d3.arc. The code builds the face with d3.select, appends SVG shapes, and applies chained transition().duration() calls to move the eyebrow group. All elements are positioned via SVG attributes within a centered group.

JJustinS1209

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

A yellow circle with black outlines forms a simple face, complete with eyes, eyebrows, and a mouth. The eyebrows animate by moving up and down repeatedly over two-second transitions. Built with D3 v5, the example uses `d3.select`, `d3.arc` for the mouth path, and SVG elements like circles and rectangles. The rendering is SVG-based with animation handled through chained `transition().duration()` calls.

SSun-XH

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

94% match

Loading thumbnail…

Let's make a face with d3.js!

A yellow circle with black outlines forms a face, featuring two eyes, animated eyebrows that move up and down, and a mouth drawn as an arc. Built with D3 v5, the example uses SVG elements like `circle`, `rect`, and `path`, with the mouth created via the `d3.arc` generator. The eyebrows transition vertically using `transition.duration`, while the face is centered using an SVG `g` transform.

Ccheeson

94% match

Loading thumbnail…

Let's make a face with D3.js

A yellow circle face with black-outlined eyes and eyebrows is drawn using D3.js v5, with the facial features positioned via SVG transforms. The code builds the face programmatically using `d3.select` and `d3.arc` for the mouth, then animates the eyebrows with chained `transition.attr` calls over two seconds each, moving them downward and back upward. The rendering uses SVG elements inside a centered `<g>` group, with dimensions taken directly from the SVG attributes. The example demonstrates basic SVG construction and animation sequencing without external data.

JJasonXQH

94% match

Loading thumbnail…

Let's make a face with D3.js

This example renders a simple, animated face from basic SVG shapes. A yellow circle forms the head, with two dark circles for eyes and rectangular eyebrows that move up and down. The mouth is drawn as an arc using the D3 `arc` function. The animation is created with D3's `.transition()` and `.duration()` methods, which are used to move the right eyebrow. The entire composition is centered and built within a single `<g>` group using D3's `select` and `append` functions.

Jjcksnm

94% match