Let's make a face with D3.js

Let's make a face with D3.js!

D3.js constructs a smiling face from SVG shapes, including a yellow circle for the head, two eyes, and an arc-based mouth using the `d3.arc()` generator. The eyebrows, rendered as rectangles, animate vertically through chained `transition().duration()` calls, moving up and down over two seconds each. The code uses D3 selections and attributes to position elements around a centered group, with all coordinates based on the SVG’s 960×500 dimensions.

Ddtdenver

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

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

Let's make a face with D3.js

A cheerful yellow face, built from SVG primitives, blinks its rectangular eyebrows up and down repeatedly. The example uses D3.js v5 selections and transitions to animate the facial features. A circle forms the head, two circles serve as eyes, and an arc path, generated with the `d3.arc()` helper, creates the mouth. The code constructs the face by appending SVG elements to a group and animates the eyebrows with chained `transition().duration()` calls.

Lluckytrue

Let's make a face with D3.js!

An animated SVG face draws attention with a yellow circular head, dark outline, and two eyes. Using D3.js v5, the code constructs the face from basic shapes—circles for the head and eyes, rectangles for eyebrows, and an arc path for the mouth—all contained within a group. The animation sequences alternate eyebrow raises and eye blinks over a few seconds. The example demonstrates D3's selection and arc APIs, along with chained transition methods to create a playful, looping facial expression.

DDevWorksSimone

Let's make a face with D3.js

A yellow circle with black facial features forms a smiley face on an SVG canvas. Two eyes and a mouth are drawn using D3 shapes, while a pair of dark eyebrows animate vertically in a looping transition, moving up and then back down. The face is centered via a group transform, with the mouth created using the d3.arc path generator. The animation uses chained transition calls on an SVG group element to shift the eyebrows repeatedly.

HHasideluxe

Let's make a face with D3.js!

This example demonstrates fundamental DOM manipulation with D3.js by constructing an animated smiling face. A yellow circle forms the head, with black-outlined eyes, rectangular eyebrows, and an arc-shaped mouth. The animation uses D3’s `transition` method to repeatedly move the entire eyebrow group up and down over two-second intervals, creating a blinking effect. The SVG scene is centered using the `attr` transform, and all shapes are appended to the SVG canvas with hardcoded dimensions and positions.

Ddktaylor916

Let's make a face with D3.js!

Ddktaylor916