face

100%

✓ Published0🌍 Public

Last edited Feb 27, 2024

Created on Feb 27, 2024

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

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.

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

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

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

93% match

Loading thumbnail…

a_face_withD3

A yellow smiley face with moving eyebrows demonstrates basic DOM manipulation in D3.js v5. The face is built using SVG circles, rectangles, and an arc-generated mouth, centered within a 960×500 viewport. The eyebrows animate vertically via chained `transition().duration()` calls, shifting down 50 pixels and back over two seconds. The code imports `select` and `arc` from D3, using data-driven attributes to position facial features relative to the canvas.

WWhoIN Lee

93% match

Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face drawn with SVG circles, rectangles, and an arc path animates its eyebrows in a looping transition. D3.js v5 selections append and style the facial elements, while `transition.attr` shifts the right eyebrow’s vertical position over 2-second intervals. The mouth uses the `d3.arc()` generator to create a curved path. Static attributes set the face radius, eye spacing, and eyebrow dimensions.

TTrey Billing

93% match

Loading thumbnail…

Face with D3

A yellow smiley face rendered in SVG with D3 v6. The example shows eyebrows that animate up and down indefinitely using chained `transition.duration` calls. It builds the face with basic shapes: circles for the head and eyes, rectangles for brows, and an `arc()`-generated path for the mouth. D3's `select` and `arc` functions handle SVG creation and geometry.

AAshutosh Singh

93% match

Loading thumbnail…

D3 JS Face!

A smiley face rendered in SVG animates its eyebrows in a sequence of timed transitions. The face is drawn with D3.js primitives: a yellow circle for the head, two circles for eyes, rectangles for eyebrows, and a path generated with the `d3.arc` function for the mouth. The animation uses D3’s `.transition().duration()` to move the eyebrows up, hold, and return, demonstrating fundamental DOM manipulation with `d3.select` and element creation.

Ssushantkadam1

93% match

Loading thumbnail…

Let's make a face with D3.js!

A D3.js animation builds a smiley face from SVG shapes, then makes its eyebrows bounce repeatedly as a looped transition. The face is composed of a yellow circle, two eyes, rectangular eyebrows, and an arc-based mouth positioned with SVG transforms. The code imports `select` and `arc` from D3 v5 to generate the mouth path and manipulate elements. A chained `transition().duration(2000)` sequence moves the eyebrow group up and down, demonstrating basic DOM selection and animation without data binding.

Vveagy

93% match