Making a face

100%

Making a face - Ex 1

✓ Published0🌍 Public

Last edited Feb 25, 2023

Created on Feb 25, 2023

A face made of simple SVG shapes—a yellow circle, two eyes, eyebrows, and a curved mouth—animates gently on a dark background. D3 v7’s `select` and `append` methods build the graphic, while `transition` chains smoothly move the eye group, eyebrows, and mouth through two-second cycles. The path for the mouth is generated using the `arc` API. This example demonstrates basic D3 transitions and shape construction from scratch.

AI-generated description

A demonstration of how to start using D3 version 6.

MIT Licensed

Similar vizzes

Loading thumbnail…

A yellow cartoon face is drawn on an SVG canvas, with eyes, eyebrows, and a mouth formed by D3 shape primitives. The eyebrows animate upward and downward in a looping transition, while the mouth is rendered using the `d3.arc` path generator. The example demonstrates importing `select` and `arc` from the D3 v5 module, manipulating SVG attributes, and applying chained `transition` calls with a two-second duration.

Ccornshoots

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

91% match

Loading thumbnail…

Making a face

A smiling face made of SVG shapes animates inside a yellow circle. D3 v7 transitions shrink and regrow the right eye, while both eyebrows shift downward and then return. The mouth is drawn with the `d3.arc` path generator as a partial ring. Elements are grouped and positioned with SVG transform attributes, and chained `transition` calls drive the two-step animation.

Ttgma99

90% match

Loading thumbnail…

lets make a face

A yellow circular face with black outlines is drawn using SVG shapes. Two eyes are represented as simple circles, while two rectangular eyebrows are animated with a timed vertical bounce using chained `.transition().duration()` calls, moving downward then returning. A mouth is formed using an `arc()` path with specified inner and outer radii and angled start/end points. The example demonstrates basic SVG composition and animation within a D3 v5 context, using the `select`, `append`, and `attr` APIs.

Sstefichim

90% match

Loading thumbnail…

Making a face

A yellow circle with eyes, eyebrows, and a mouth forms a face using D3 v5 selections and SVG shapes. The right eyebrow animates upward and back down via chained `transition().attr()` calls over two seconds each, while the mouth is drawn with `d3.arc()`. All elements are positioned relative to a centered group, with eyes offset by fixed pixel distances, creating a simple, animated cartoon face.

Ttlrdevere

90% match

Loading thumbnail…

Make a Face

A yellow circle face with eyes, eyebrows, and a mouth is drawn using D3 v5 SVG primitives. The code uses `d3.select`, `d3.arc`, and `transition.attr` to animate the eyebrows downward and back upward over two seconds. All shapes are positioned relative to the SVG center via a translated group, with the mouth rendered as an arc path. The visualization demonstrates basic shape composition and chained transitions.

Aalibabagalaxy

90% match

Loading thumbnail…

making a face

A yellow circle with black features forms a simple face, with two eyes and a mouth drawn using an SVG path. The eyebrows are animated rectangles that move down and back up over four seconds. The visualization uses D3 v6 selections to append SVG shapes and the `arc` generator from D3 to create the mouth path. The `transition` method handles the eyebrow animation, while the SVG coordinate system positions features around a central group.

Jjwu534@gmail.com

90% match

Loading thumbnail…

Making a face

A yellow circle face with two eyes and eyebrows is rendered in SVG, with the right eyebrow animating upward and downward over two seconds. The mouth is drawn as a half-circle arc using the `d3.arc` helper. Built with D3 v5, the code uses `select`, `attr`, and chained `transition` calls to control the animation, positioning elements via SVG transforms.

Rrcumani

90% match