Skip to main content
SimilarExport ZIP
100%

Let's make a face with D3.js!

✓ Published2🌍 Public
MMuhammad Jarir Kanji
Last edited Dec 16, 2020
Created on Dec 16, 2020

A smiling face made of SVG shapes is drawn in the center of the canvas. The animation, powered by D3.js v5, continuously moves the rectangular eyebrows up and down using chained `transition().duration(2000)` calls. The face components are built with D3's `select` and `append`, while the mouth uses the `arc` function to generate a semicircular path.

AI-generated description

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

MIT Licensed

Similar vizzes

Loading thumbnail…

Let's make a face with D3.js!

A smiling cartoon face is drawn with D3.js, rendered as SVG shapes. The face uses circles for the head and eyes, rectangles for eyebrows, and an arc-based path for the mouth. The eyebrows animate by moving downward and back upward over six seconds using chained `transition` calls with a 3000-millisecond duration. The code constructs the face using `d3.select`, `d3.arc`, and `d3.transition` APIs on the SVG canvas.

BBKirst3
94% match
Loading thumbnail…

Let's make a face with D3.js!

A smiling face is drawn with SVG shapes, and its eyebrows animate upward and downward in a loop. The face is constructed using D3.js v5’s `select` and `append` to create circles for eyes, rectangles for eyebrows, and a `path` for the mouth via the `arc` shape generator. The eyebrows’ movement is driven by chained `transition().duration()` calls that alter the group’s `transform` attribute. The code relies on D3’s DOM manipulation and transition APIs, with all rendering occurring in an SVG viewport.

JJuan Carlos
94% match
Loading thumbnail…

Let's make a face with D3.js!

A smiling face is drawn with SVG shapes, with its eyebrows animating up and down in a repeating loop. The example demonstrates fundamental DOM manipulation in D3.js v5, using `select` and `append` to build circles, rectangles, and a path. The mouth is created with the `d3.arc` API, and the eyebrow motion relies on chained `transition().duration()` calls to alternate the transform attribute, creating a simple, continuous facial animation.

PParminder Singh
94% match
Loading thumbnail…

Let's make a face with D3.js!

A smiling face built from SVG primitives demonstrates basic D3.js DOM manipulation. Circles form the head, eyes, and mouth, while rectangles serve as eyebrows. The eyebrows animate via chained `transition().duration(2000)` calls, moving down and up over four seconds. The mouth is drawn using the D3 `arc` shape generator, and the entire composition is placed inside a red-background SVG canvas.

PPranita Khandelwal
94% match
Loading thumbnail…

Let's make a face with D3.js!

A smiling face drawn with SVG elements animates as its eyebrows repeatedly move up and down. Built with D3.js v5, the example uses selection methods like `append` and `attr` to construct circles, rectangles, and an arc-based path for the mouth. A chained `transition` with a two-second duration shifts the eyebrow group's transform, creating the looping motion.

Hhsrashmi
94% match
Loading thumbnail…

Let's make a face with D3.js!

A smiling face drawn with SVG elements animates as its eyebrows repeatedly move up and down. Built with D3.js v5, the example uses selection methods like `append` and `attr` to construct circles, rectangles, and an arc-based path for the mouth. A chained `transition` with a two-second duration shifts the eyebrow group's transform, creating the looping motion.

Hhsrashmi
94% match
Loading thumbnail…

Let's make a face with D3.js!

A smiling face rendered as SVG animates its eyebrows through a repeating two-second cycle. The code uses D3 v5 selections and transitions to manipulate SVG elements, building the face from circles, rectangles, and an arc-generated path for the mouth. The `transition().duration()` calls sequentially shift the eyebrow group up and down, demonstrating fundamental DOM manipulation with D3's data-binding and animation APIs.

Hhsrashmi
94% match
Loading thumbnail…

Let's make a face with D3.js!

A D3.js animation constructs a smiling face from SVG shapes and then animates its eyebrows. The face is drawn using circles for the eyes and head, rectangles for the eyebrows, and a path for the mouth, created with the `arc` shape generator. Eyebrow movement occurs through chained `transition().duration()` calls on the group’s `transform` attribute, shifting it vertically. The code uses D3 v5 selection, attributes, and the `arc` API, rendering all elements as SVG within a 960 by 500 canvas.

AAntonino Praxedes
94% match