face

100%

✓ Published0🌍 Public

Last edited Jun 6, 2021

Created on Jun 6, 2021

Forked from Let's make a face with D3.js!

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.

AI-generated description

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

MIT Licensed

Similar vizzes

Loading thumbnail…

face

A yellow smiley face is centered in an SVG canvas, with two eyes, a mouth drawn using a D3 arc path, and rectangular eyebrows that animate upward and back down in a looping transition. Built with D3 v5, the example demonstrates fundamental DOM manipulation by selecting the SVG element, appending groups and shapes, and using chained `transition().duration()` calls to move the eyebrows via transform attributes.

EEbenizerR

96% match

Loading thumbnail…

face

A yellow smiley face with black-outlined eyes and a curved mouth is rendered as an SVG. The example demonstrates fundamental D3.js DOM manipulation and animation by moving the face's rectangular eyebrows up and down. Using `d3.select`, `svg.append`, and chained `transition().duration()`, the code updates the `transform` attribute of a group element to create the repeated eyebrow motion, with all geometry defined as static attributes.

JJyotirmayi-max

94% match

Loading thumbnail…

face

A yellow smiley face with animated eyebrows demonstrates basic SVG manipulation in D3.js. The code uses d3-selection to append circles and rectangles for the face, eyes, and brows, while a d3-shape arc creates the mouth. A chained transition moves the entire eyebrow group up and down in a continuous loop, altering its transform attribute over two-second intervals. The example relies on D3 v5 and SVG rendering.

SShantiHahn

94% match

Loading thumbnail…

face

A smiley face drawn with D3.js animates its eyebrows up and down in a looping transition. The SVG face uses a yellow circle, two eye circles, and an arc-generated mouth, while the eyebrows are rectangles that move via chained `transition.attr` calls over two-second intervals. D3 v5’s `select` and `arc` APIs build the static elements, with the animation driven by D3’s transition system.

Ssatishnarne99@gmail.com

94% 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

93% 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

93% match

Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face with black outlines is drawn on an SVG canvas, centered in the viewport. Its eyes, eyebrows, and mouth are all composed of basic geometric shapes. Using D3.js v5, the code builds the face by appending circles, paths, and rectangles to SVG groups. An animation sequence uses chained `.transition()` calls to shift the eyebrows up and down, with each movement lasting two seconds. The mouth is created using the `arc()` API, while the overall structure demonstrates fundamental SVG DOM manipulation via D3 selection and attribute methods.

AAndrey Chergik

93% match

Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face is drawn with SVG circles, rectangles, and a path, centered on a 960-by-500 canvas. The face’s eyebrows animate upward and back down using chained `transition` calls with 2-second durations. The code demonstrates fundamental D3.js DOM manipulation by selecting the SVG, appending grouped elements, and using the `arc` generator to shape the mouth. D3 v5 is loaded via a CDN, with `select` and `arc` imported from the library.

Mmoonstorm86

93% match