A portrait

100%

✓ Published0🌍 Public

Last edited Jan 4, 2023

Created on Jan 3, 2023

Forked from Shapes and Colors with SVG and CSS

A yellow face with black-outlined eyes, eyebrows, and a smiling mouth is drawn using D3.js. The SVG portrait is centered, with circles for the eyes and an arc-generated path for the mouth. Animated transitions move the eyebrow rectangles upward and back downward over two seconds each, creating a subtle expressive motion. The example uses D3 v7 selections, the `arc` helper, and chained `transition().duration()` calls.

AI-generated description

Making a smiley face with d3.js

MIT Licensed

Similar vizzes

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

86% match

Loading thumbnail…

D3

A smiling face is drawn in yellow with black outlines, featuring two eyes, animated eyebrows that move up and down, and a curved mouth. The animation is built with D3 v5 transitions, where the eyebrow group’s transform attribute is tweened over two seconds to shift vertically, then returns. The SVG is centered using a translated `<g>` element, and the mouth’s arc path is generated with the `d3.arc()` helper, while circles and rectangles define the other facial features.

Aantoinecarto

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

86% match

Loading thumbnail…

Image Test

A smiling yellow face with black eyes, eyebrows, and a mouth is drawn in the center of an SVG canvas using D3 v5. The eyes are circles, the eyebrows are rectangles, and the mouth is an arc path created with the `arc` generator. The eyebrows animate vertically via chained `transition.attr` calls, moving downward and then returning to their original position over two seconds each way. The svg is selected and manipulated directly with D3 selections, and the face is centered using a translated group element.

Aanvesh12

85% match

Loading thumbnail…

Let's make a face with D3.js!

This example shows a yellow smiley face drawn with SVG circles, rectangles, and an arc path, with animated eyebrows that rise and fall in a looping transition. The code uses D3.js v5 selections to append elements to an SVG canvas and `transition().duration()` to move the eyebrow group vertically. Using `d3.arc` for the mouth and fixed pixel offsets for features, it demonstrates fundamental DOM manipulation and chained transitions without external data.

Rranger

85% match

Loading thumbnail…

Let's make a face with D3.js!

A yellow SVG face with black outlines is drawn using D3.js, featuring circular eyes, rectangular eyebrows, and an arc-based mouth. The eyebrows animate vertically via chained `transition` calls, moving down and back over two seconds each. Using D3 v7, the code selects the SVG, creates a centered group, and builds shapes with `circle`, `rect`, and the `arc` generator for the mouth. The face's proportions are driven by constants like `eyeSpacing` and `eyeRadius`, with no external data source.

Aash301

85% match

Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face drawn with SVG circles, rectangles, and an arc path animates its eyebrows in a looping transition. D3.js v5 selections append and style the facial elements, while `transition.attr` shifts the right eyebrow’s vertical position over 2-second intervals. The mouth uses the `d3.arc()` generator to create a curved path. Static attributes set the face radius, eye spacing, and eyebrow dimensions.

TTrey Billing

85% match

Loading thumbnail…

Let's make a face with D3.js!

A yellow circle face with black-outlined features is rendered in SVG, and its eyebrows animate upward and back down over four seconds. Built with D3 v5, the example uses `d3.select` to target the SVG, `d3.arc` to generate the mouth path, and chained `transition().duration()` calls to move the eyebrow group. The face is centered via a translated `g` element, with eye spacing, radius, and eyebrow dimensions defined as constants. No external data is loaded; all shapes are constructed programmatically from hard-coded values.

Ppcbt1125

85% match