Making Face

100%

✓ Published1🌍 Public

Last edited Jan 8, 2021

Created on Jan 8, 2021

A simple face made of SVG shapes smiles as its eyebrows repeatedly rise and fall. Built with D3 v6, the visualization uses `d3.select`, `d3.arc`, and chained `transition` calls to animate the eyebrows over two-second intervals. The face is centered in an SVG canvas, with circles for eyes, a path for the mouth, and rectangles for eyebrows, all drawn in a bright yellow with black outlines.

AI-generated description

A demonstration of how to start using D3 version 6.

MIT Licensed

Similar vizzes

Loading thumbnail…

Make a face!

A smiling face made of yellow SVG shapes animates as its eyebrows repeatedly lift and lower. The visualization uses D3 v5 selections and transitions to move the eyebrow rectangles along the y-axis over two one-second intervals. The face is constructed with D3's `arc` generator for the mouth and appended circle and rect elements for the eyes and brows, all centered within an SVG canvas.

HHanyang

92% match

Loading thumbnail…

Let's Make a Face!

A smiling face, built from basic SVG shapes, animates its eyebrows upward and downward in a repeating loop. The face is centered within an SVG canvas, with a yellow circle for the head, black-outlined circles for eyes, rectangles for eyebrows, and a curved arc for the mouth. The example uses D3 v6 to construct the scene, and applies a `transition().duration(2000)` to the eyebrow group, shifting its vertical transform to create the animation.

Ootes10

92% match

Loading thumbnail…

Let's Make a Face

A smiling face built from basic SVG shapes appears on a yellow circle, with eyebrows that bob up and down through a looping transition. The example uses d3-selection and d3-shape to construct the face, positioning eyes, eyebrows, and a mouth with coordinate offsets. An arc generator creates the mouth, while chained transition calls animate the eyebrow group’s vertical position over two-second intervals, producing a playful expression. The code renders entirely in SVG within a 960 by 500 viewport.

Rryandebattista

92% match

Loading thumbnail…

Make a face with D3.js

A smiling face made of SVG shapes is drawn with D3.js v5. The face uses a yellow circle, black-outlined eyes, rectangular eyebrows, and an arc-based mouth. A chained `transition` repeatedly raises and lowers the eyebrows over two-second intervals. The code imports `select` and `arc` from the D3 library, positions elements with SVG attributes, and animates the eyebrow group via `transition.attr`. The example demonstrates basic SVG composition and D3 transitions on a 960×500 canvas.

TTapiwa Lason

91% match

Loading thumbnail…

Make a face!

A smiling face made of SVG shapes uses D3 v5 to animate its eyebrows in a looping motion. The yellow circle head, black-outlined eyes, and arc-based mouth are drawn with D3 selections and the `d3.arc` path generator. Eyebrow rectangles transition vertically via chained `transition().duration()` calls, moving up and down repeatedly. The static SVG is centered using a group transform, and the animation runs automatically on page load.

HHanyang

91% match

Loading thumbnail…

Making Face

A yellow circle with a black outline forms a face, featuring two eyes, rectangular eyebrows, and a mouth shaped as a semicircular arc. The eyebrows animate by moving upward and back down over two seconds, using D3 transitions. The visualization uses D3 version 6’s `select`, `arc`, and `transition` methods, rendering shapes as SVG elements within a 960x500 viewport. The code constructs the facial features via appended circles, rects, and a path, with the mouth defined by an inner radius of 150 and outer radius of 170.

Jjakenachlas

91% match

Loading thumbnail…

Let's Make a Face!

This visualization shows a simple, stylized face constructed from basic SVG shapes, including a yellow circle head, black circular eyes, red arc mouth, and rectangular eyebrows. A smooth, repeated animation moves the eyebrows upward and back down over two seconds, creating an expressive effect. Built using D3 v5, the code leverages SVG primitives and D3’s transition API to animate the eyebrow group’s transform property. The face is centered using a translated group, and the mouth is drawn with a d3.arc path generator.

AAndres Bizzarri

91% match

Loading thumbnail…

Let's Make a Face

A yellow circle face with black eyes and animated eyebrows is drawn using SVG. The eyebrows move up and down through chained transitions that alternate their vertical offset. D3 v6's `select`, `arc`, and `transition` APIs construct the face, with the mouth rendered as an arc path and eye positions set via fixed coordinates.

BbeauMarko

91% match