Skip to main content
SimilarExport ZIP
100%

face

✓ Published0🌍 Public
PPallaviManupati
Last edited Feb 21, 2022
Created on Feb 21, 2022

A smiley face rendered in SVG slowly raises and lowers its blue eyebrows. The animation is created with D3.js v5 transitions, which adjust the vertical transform of an eyebrow group over two one-second durations. The static face parts—pink head, green eyes, and a mouth arc—are built using D3's `select`, `append`, and `arc` APIs on the SVG canvas.

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 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
92% 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
91% 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…

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

face

A smiling face drawn with SVG shapes—a yellow circle, black outlines, pink ellipses for cheeks and ears, and an arc for the mouth—has animated eyebrows that continuously move up and down. The example demonstrates fundamental DOM manipulation with D3.js v5, using `select`, `append`, and `attr` to build the face from primitive elements. A `transition` with a two-second duration moves the eyebrow group, while `arc` generates the mouth path. No external data is loaded; all geometry is hardcoded in `index.js`.

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

face

This example shows a smiling face whose eyebrows animate up and down in a looping motion. The face is drawn entirely with SVG shapes, including a circle for the head, two circles for eyes, rectangles for eyebrows, and a path generated using the d3.arc function for the mouth. The animation uses D3 v5’s chained transition method with a 2000-millisecond duration to repeatedly translate the eyebrow group between two vertical positions. The code demonstrates fundamental DOM manipulation by selecting the SVG element and appending groups and shapes to build the composition, with the face centered dynamically using the viewport dimensions.

JJyotirmayi-max
90% 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
89% match