Let's Make a Face Part I

100%

Let's Make a Face Part I

✓ Published1🌍 Public

Last edited Mar 17, 2020

Created on Mar 14, 2020

A simple animated smiley face is constructed using D3.js, with a yellow circular head, two eyes, eyebrows, and a partial arc mouth. The eyebrows animate upward and downward in a repeating cycle, adding a subtle expressive motion to the otherwise static face. The visualization is built entirely with SVG primitives—`circle`, `rect`, and `path` elements—and relies on D3's `transition` API to animate the eyebrow transform over two-second intervals. The arc for the mouth is generated using D3's `arc` function, which produces a path for the specified inner and outer radii and angle range.

AI-generated description

Half way towards a smiley face.

MIT Licensed

Similar vizzes

Loading thumbnail…

Let's make a face

A smiley face, drawn with SVG circles and an arc path, animates its eyebrows in a looping sequence in a D3.js visualization. The code builds the face by manipulating SVG groups and shapes, using D3's `select` and `append`. A `transition` with a 2000-millisecond duration shifts the eyebrow group up and down, creating the expression change. The face's construction relies on explicit pixel coordinates and D3's `arc` generator for the mouth, with a yellow circle serving as the head.

Mmoha0902

93% match

Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face is drawn with D3.js, featuring two eyes, a curved mouth, and animated eyebrows that move up and down in a looping transition. The visualization demonstrates fundamental DOM manipulation by appending and transforming SVG shapes (`circle`, `rect`, `path`) within grouped elements (`g`), using D3 v5’s selection and transition APIs. The face is centered via a translated group, and the mouth is generated with D3’s `arc` shape helper, while the eyebrow motion relies on chained `.transition().duration()` calls.

Ccollv004

92% match

Loading thumbnail…

Let's make a face with D3.js!

A D3.js smiley face uses SVG primitives—circles, rectangles, and an arc path—to draw a yellow head, eyes, moving eyebrows, and a mouth. The animation repeatedly translates the eyebrow group up and down via chained `transition().duration()` calls, demonstrating DOM manipulation. The code constructs the face from scratch using D3’s `select`, `append`, and `attr` methods, and computes the mouth’s shape with the `arc` helper, all rendered in an SVG canvas.

Ppcbt1125

92% match

Loading thumbnail…

Let's make a face with D3.js!

Ppcbt1125

92% match

Loading thumbnail…

Let's make a face with D3.js!

A D3.js animation draws a yellow smiley face with circular eyes, rectangular eyebrows, and an arc-shaped mouth. The code builds the face using SVG primitives like `circle`, `rect`, and `path`, selected and appended via `d3.select`. An animated eyebrow movement uses chained `transition().attr()` calls over two two-second intervals, shifting the eyebrow group vertically. The `d3.arc` generator defines the mouth’s curved path, and the layout centers the face within a 960×500 SVG using an offset group and width/height attributes.

Ssourcebox-bug

92% match

Loading thumbnail…

Let's make a face with D3.js!

A smiley face drawn with D3.js animates its eyebrows in a looping up-and-down motion. The example demonstrates fundamental SVG construction using D3 selections and shape generators, building the face from a yellow circle, two eyes, rectangular eyebrows, and an arc-based mouth. The eyebrows transition vertically via chained `transition().duration()` calls, while `d3.arc` computes the mouth path. The code uses `select` and `arc` from D3 v5, with all elements positioned through SVG attributes.

VVerdidk

92% match

Loading thumbnail…

Let's make a face with D3.js!

A smiley face, drawn with yellow circles and a black smile, animates by shifting its eyebrows upward and back down. The entire face is constructed in an SVG canvas using D3.js version 5, with the D3 selection and append API building the DOM elements. The eyebrows move through a chained sequence of D3 transitions, each lasting two seconds, which change the transform attribute of a group containing two rectangles. The mouth is generated using D3’s arc shape helper to create a path with specified inner and outer radii and angular range.

Ssara17585

92% match

Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face drawn with D3.js demonstrates fundamental DOM manipulation as its eyebrows animate up and down. Using D3 v5 and SVG elements, the example builds the face from a circle, two eye circles, rectangular eyebrows, and an arc-based mouth via the `d3.arc()` generator. A chained `transition()` with `attr()` calls moves the eyebrow group sequentially over two-second durations, triggering the wiggle effect. Static geometry is appended through selections, while animation relies on D3's built-in transition API.

CChristine

92% match