Skip to main content
SimilarExport ZIP
100%

Fork of Fork of Let's make a face with D3.js!

✓ Published1🌍 Public
PPrathyusha Jampala
Last edited Feb 23, 2023
Created on Feb 23, 2023

A yellow SVG face with pink cheeks, eyes, a nose, eyebrows, and a toothy smile is built through fundamental DOM manipulation in D3.js. The eyebrows animate up and down using chained `transition().duration()` calls on a group element. The face is composed of SVG primitives like `circle`, `rect`, and `path`, with the mouth and nose generated using the `d3.arc()` shape generator. The page loads D3 v5 from a CDN and renders entirely with SVG and 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…

Fork of Fork of Fork of Let's make a face with D3.js!

A playful SVG face built with D3.js v5 features a large pink circular head, black eyes, and animated eyebrows that shift upward and back. The face includes a nose, mouth, teeth, and additional facial features drawn using D3’s `arc` generator and basic SVG shapes like `circle` and `rect`. The code demonstrates fundamental DOM manipulation through selections and chained `transition().duration()` calls to create the eyebrow motion on a yellow background.

PPrathyusha Jampala
96% match
Loading thumbnail…

Fork of Fork of Let's make a face with D3.js!

This example demonstrates fundamental DOM manipulation with D3.js by constructing a smiley face from SVG shapes, including circles for eyes, rectangular eyebrows, and an arc-based mouth and nose. The eyebrows animate upward and downward using chained `transition()` and `.attr()` calls, creating a subtle moving expression. The code uses D3 v5’s `select` and `arc` utilities, with the entire face centered on an SVG canvas and rendered in pink and yellow. The animation runs once on page load, with no data source or user interaction.

PPrathyusha Jampala
95% match
Loading thumbnail…

Fork of Fork of Let's make a face with D3.js!

A smiling yellow face animates against a black background, with blue rectangular eyebrows that bounce upward and downward, a red-outlined mouth, white teeth that rotate side to side, and a tongue. The code builds the face using D3.js v5 selections and the `d3.arc` shape generator, appending SVG circles, rects, and paths to a 1000x500 canvas. Multiple `transition().duration()` calls drive the eyebrow movement and teeth rotation, while static elements like eyes, nose, and mouth are positioned via SVG transforms.

Pprachow
95% match
Loading thumbnail…

Fork of Fork of Let's make a face with D3.js!

A yellow smiley face with animated eyebrows, teeth, and a tongue is rendered in SVG. The face uses D3.js v5 selection methods to construct circles, rectangles, and arc-generated paths for its features. Eyebrows and teeth move through chained transitions that alter their transforms over two-second intervals, while the mouth and tongue remain static. The code displays fundamental DOM manipulation, importing `select` and `arc` from D3.

Pprachow
95% match
Loading thumbnail…

Fork of Fork of Let's make a face with D3.js!

A yellow smiley face is drawn on an SVG canvas using D3.js, with its eyebrows animating up and down in a repeating two-second transition. The code builds the face with D3’s `select`, `arc`, and `transition` APIs, using SVG circles for eyes, rectangles for eyebrows, and a path for the mouth. The eyebrows shift vertically via chained `transition().duration()` calls, while the face itself remains static. The example demonstrates fundamental DOM manipulation and SVG rendering with D3 v5.

Ssnehareddygurram
95% match
Loading thumbnail…

Fork of Fork of Let's make a face with D3.js!

A yellow smiley face with animated eyebrows demonstrates fundamental DOM manipulation with D3.js. The face is drawn using SVG elements, including circles for the head and eyes, rectangles for eyebrows, and an arc-based path for the mouth. Eyebrows animate upward and downward through chained `transition()` calls with a two-second duration each. The code uses D3 v5 and imports `select` and `arc` directly. All elements are centered within an SVG via a translate transform.

PPriya Tiwari
95% match
Loading thumbnail…

Fork of Fork of Let's make a face with D3.js!

A yellow smiley face is rendered in SVG using D3.js, with circular eyes and an arc-based mouth. A group containing rectangular eyebrows animates vertically via chained `transition()` calls, moving up and then back down over two two-second intervals. The code uses D3 selections and the `arc` generator from `d3-shape`, with dimensions driven by the SVG's width and height attributes. This example demonstrates fundamental DOM manipulation and animation with D3 v5.

Ssrinivasaraosankula
94% match
Loading thumbnail…

Fork of Fork of Let's make a face with D3.js!

A yellow smiley face with animated eyebrows is drawn in an SVG canvas. D3.js v5 is used for DOM selection and manipulation, creating the face from primitive shapes: a circle for the head, smaller circles for eyes, rectangles for eyebrows, and a curved path for the mouth. The eyebrows animate via chained `transition()` calls over two seconds each, moving them up and down repeatedly. The code uses `select()`, `append()`, and `attr()` from D3 to build the static elements, while the `arc()` generator defines the mouth's shape.

NNavaneeth-Ragi
94% match