Skip to main content
SimilarExport ZIP
100%

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

✓ Published1🌍 Public
Ssohum42
Last edited Jan 1, 2022
Created on Jan 1, 2022

A smiling face is rendered as a yellow circle with two eyes, animated eyebrows, and an arched mouth, all drawn in SVG. The eyebrows move up and down repeatedly using chained D3 transitions. The code builds the face by appending SVG elements to a group, using D3 v5's `select`, `attr`, and `arc` for the mouth path, with an implicit data-join-free DOM construction.

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 Let's make a face with D3.js!

A smiling face built with SVG renders a yellow circle, two eyes, and an arc-based mouth. D3.js v5 transitions animate the eyebrows, moving a group containing two rectangles upward and back down over a four-second loop. The code uses `d3.select`, `d3.arc`, and chained `transition().duration()` calls to manipulate DOM elements directly, with static attributes for spacing and dimensions defined in JavaScript.

SSaip Can Hasbay
97% match
Loading thumbnail…

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

A yellow smiley face with animated eyebrows is rendered in an SVG. The face is composed of D3.js shapes: a circle for the head, two circles for the eyes, and an arc for the mouth. The eyes' rect eyebrows repeatedly move up and down using chained D3 `transition` calls with a 2-second duration each. The code uses D3 v5's `select`, `append`, and `attr` functions to build the SVG DOM directly.

CCorey-PT
96% match
Loading thumbnail…

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

A smiling face rendered in SVG uses D3.js v5 to demonstrate fundamental DOM manipulation. The code selects an SVG element, appends a yellow circle for the face, and adds eyes, eyebrows, and a mouth using D3’s `arc()` generator. Two transitions animate the eyebrow group’s vertical position over two seconds each, moving them up and down. The example relies on D3’s `select` and `transition` methods to build and animate the static SVG structure.

PPiotr Paszek
96% match
Loading thumbnail…

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

A yellow smiley face is drawn on an SVG canvas, with two eyes and a mouth created using D3's `arc` generator. The eyebrows, rendered as rectangles, animate upward and back down repeatedly via chained `transition` calls with a 2-second duration each. The code uses D3 v5 selections to append circles, rectangles, and a path, and stores numeric layout variables for spacing and offsets.

Aanmarsan
96% match
Loading thumbnail…

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

A yellow smiley face is drawn on an SVG canvas as a circle with eyes, eyebrows, and a mouth, built by manipulating DOM elements with D3.js v5. The code uses `select`, `append`, and `attr` to construct the shapes, and `transition` to animate the eyebrow group moving down and back up over a 4-second loop. The mouth is a path generated with the `arc` function, creating a curved shape from specified angles.

Hhunianhang
96% match
Loading thumbnail…

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

This example shows a yellow smiley face with two eyes, moving eyebrows, and a curved mouth, rendered as SVG shapes. The eyebrows shift upward and then return to their original position using chained `transition().duration()` calls. The code builds the face with D3 selections and shape generators, including `select`, `arc`, and attribute setters like `.attr()`, positioning elements via `translate` transforms on a centered group. The face is drawn entirely through D3’s DOM manipulation, with no external data source.

SSUNAMLIMBU
96% match
Loading thumbnail…

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

A smiley face built with SVG and animated with D3.js demonstrates fundamental DOM manipulation. Yellow circular head, two eyes, rectangular eyebrows, and a curved mouth are created using D3 selections and the `d3.arc` path generator. The eyebrows repeatedly move up and down via chained `transition` calls, each lasting two seconds. The code uses D3 v5, imports `select` and `arc` from the library, and renders entirely in SVG without external data.

Vvram80
96% match
Loading thumbnail…

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

A smiling face is rendered as a yellow circle with two eyes, animated eyebrows, and a mouth built from an arc path. The animation, driven by D3.js's `transition` method, shifts the eyebrows up and down over a two-second cycle. The face is constructed using SVG primitives—`circle`, `rect`, and `path`—positioned via `attr` transforms within a nested `g` group, with the `arc` generator defining the mouth's shape.

LLori Labrie
96% match