Skip to main content
SimilarExport ZIP
100%

Just a face!

✓ Published1🌍 Public
LlesserGod
Last edited May 5, 2020
Created on May 5, 2020

A yellow smiley face animates in an SVG, with its eyes and eyebrows moving in sync before returning to their original positions. The face is centered via a translated group, using D3.js v5 selections and transitions to cycle attributes like radius and y-coordinates over two-second intervals. The mouth is drawn with the d3.arc shape generator. All elements are styled with CSS and rendered with SVG animation.

AI-generated description

Demonstrates fundamental DOM manipulation using D3.js by making a smiley face whose eyebrows move.

MIT Licensed

Similar vizzes

Loading thumbnail…

Let'd make a face with D3.js!

A yellow SVG face built with D3 v5 displays a simple smiley with two eyes, animated eyebrows, and a curved mouth. The code draws the face using SVG shapes such as circles, a rect, and a path generated with the `d3.arc()` helper. Transitions animate the eyebrows by shifting their vertical position over two seconds, while the mouth delays before changing its radius. The face is centered within a 960×500 SVG canvas using a transform, with static features defined by constants for spacing and dimensions.

885TT58
90% 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
90% match
Loading thumbnail…

face

A yellow smiley face is drawn as an SVG circle with black-stroked eyes and an arc-shaped mouth. Using D3.js v5, the code selects and appends SVG elements to a 960x500 canvas, centering the face via a translation. The eyebrows, rendered as rectangles, animate upward and downward through chained `transition` calls with a 2000-millisecond duration, demonstrating fundamental DOM manipulation and data-join-free animation.

Mmyoung1032
90% match
Loading thumbnail…

let's animate the face

A yellow smiley face is drawn as an SVG circle with eyes, eyebrows, and a mouth, all positioned using D3.js selections and attribute helpers. The eyebrows and mouth animate via chained `transition.attr` calls, moving vertically and scaling over two-second intervals, demonstrating fundamental DOM manipulation with `d3.select`, `d3.arc`, and transition methods. The example uses D3 v5 and renders entirely in SVG.

TT E Simon
90% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face is drawn in SVG using D3.js, with circular eyes, rectangular eyebrows, and a mouth created via `d3.arc` for the half-circle path. The face is centered by translating a group element to the middle of the 960×500 SVG canvas. The eyebrows animate upward and back down over four seconds, using chained `transition().duration(2000)` calls that modify the group’s `transform` attribute. The example relies on D3 v5 selections and the `arc` generator to construct the facial features.

Ooabundes
90% 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
90% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face is drawn in SVG using D3.js v5. Its eyes and mouth are static, while its rectangular eyebrows animate upward and back down via chained `transition` calls on a group element. The code uses `d3.select` and `d3.arc` to construct the face, with all positions and dimensions defined as numeric constants. The animation runs once over four seconds, demonstrating basic DOM manipulation and data-driven shape creation with D3.

CCameron
90% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face is drawn in SVG using D3.js v5. Its eyes and mouth are static, while its rectangular eyebrows animate upward and back down via chained `transition` calls on a group element. The code uses `d3.select` and `d3.arc` to construct the face, with all positions and dimensions defined as numeric constants. The animation runs once over four seconds, demonstrating basic DOM manipulation and data-driven shape creation with D3.

CCameron
90% match