Let's make a face

100%

Let's make a face

✓ Published1🌍 Public

Last edited Sep 29, 2019

Created on Sep 19, 2019

A smiley face is drawn with yellow skin and black features on a blank SVG canvas. The eyebrows animate upward and back down over two seconds. The example demonstrates layered SVG construction using d3.select to build a face, positioning features with transforms, and applying a simple animation with d3.transition to move the eyebrow group.

AI-generated description

An example showing the capabilities of VizHub.

MIT Licensed

Similar vizzes

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…

Let's make a face

A yellow circle becomes a smiley face as the animation runs. D3 v5 builds the face from SVG shapes—a circle for the head, two circles for eyes, two rectangles for eyebrows, and an arc path for the mouth—centered within an SVG canvas. The left eyebrow briefly moves upward via chained `transition` calls, while all other elements remain static. The code uses d3-selection, d3-arc, and SVG attributes, with no external data source.

Jjf1978

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…

Lets Make a Face

A yellow smiley face animates on an SVG canvas as its eyes and eyebrows move independently and its mouth is drawn with an arc path. The example demonstrates D3 v7 transitions, using `d3.select`, `d3.arc`, and chained `.transition().duration()` calls to shift eye positions and raise eyebrows over different time intervals. SVG elements—circles for eyes, rectangles for eyebrows, and a path for the mouth—are appended to a centered group, showing how D3 manipulates attributes and transitions to create simple character animation.

Ggabrielribeirob

92% match

Loading thumbnail…

Lets make a Face!

A yellow smiley face appears centered on an SVG canvas, built from D3 shapes: a circle for the head, two circles for eyes, rectangles for eyebrows, and a path for the mouth. The eyebrows animate upward and back down repeatedly using D3's `transition()` with a two-second duration. The code uses `d3.select`, `d3.arc`, and attribute setters to construct the static face, while the animation is driven by chained `transition().attr()` calls, rendering in SVG.

OOvxOO

92% match

Loading thumbnail…

Lets make a face

A yellow smiley face is drawn on an SVG canvas using D3.js selection and arc methods. The face includes circles for eyes and a path for the mouth, while rectangular eyebrows animate vertically through chained transition calls over two-second intervals. This example demonstrates fundamental DOM manipulation by building shapes from appended SVG elements and updating their attributes with D3 transitions.

BBreu1995

92% match

Loading thumbnail…

Lets make a face

A simple yellow smiley face is drawn in an SVG, composed of a large circle, two eyes, and a curved mouth. The face’s eyebrows animate upward and then back down in a repeating sequence using D3 v6 transitions. The visualization is built with D3 selections and the `arc` generator for the mouth, while all geometric properties are defined as constants in the code.

Kkhuton

91% match

Loading thumbnail…

Let's make a face with D3.js

A yellow smiley face is drawn inside an SVG canvas using D3.js v5. The face's two eyebrows are rectangles that animate vertically, moving down and then back up over two seconds each way using chained `transition().duration()`. The example uses D3's `select` and `append` functions to build the SVG elements, including a circle for the head, two circles for eyes, a line for the mouth, and the animated eyebrow rectangles. All elements are positioned relative to the center of the canvas, and the animation is triggered directly in the JavaScript code.

NNaveenaS12

91% match