Skip to main content
SimilarExport ZIP
100%

Let's make a face with D3.js!

✓ Published2🌍 Public
Jjeronimoek
Last edited May 14, 2020
Created on May 9, 2020

A stylized face drawn with SVG primitives animates its eyebrows in a looping motion. The example uses D3.js v5 to build concentric circles for the head and eyes, a path for the smile, and rectangles for the eyebrows. The code demonstrates `d3.select`, `d3.arc`, and chained `transition().duration()` calls to create the repetitive vertical eyebrow movement.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Let's make a face with D3.js!

A stylized face drawn with SVG primitives animates its eyebrows in a looping motion. The example uses D3.js v5 to build concentric circles for the head and eyes, a path for the smile, and rectangles for the eyebrows. The code demonstrates `d3.select`, `d3.arc`, and chained `transition().duration()` calls to create the repetitive vertical eyebrow movement.

Jjeronimoek
100% match
Loading thumbnail…

Let's make a face with D3.js!

A smiling face drawn in SVG animates as its eyebrows repeatedly rise and fall. The example demonstrates fundamental D3.js DOM manipulation by using `select`, `append`, and `attr` to construct circles, rectangles, and a path for the mouth, with an `arc` generator for the smile. The eyebrow motion is driven by a two-stage `transition` with a two-second duration each, moving a group element vertically to create the expressive loop.

AArriannePandaraoan
93% match
Loading thumbnail…

Let's make a face with D3.js!

A smiling face drawn in SVG animates as its eyebrows repeatedly rise and fall. The example demonstrates fundamental D3.js DOM manipulation by using `select`, `append`, and `attr` to construct circles, rectangles, and a path for the mouth, with an `arc` generator for the smile. The eyebrow motion is driven by a two-stage `transition` with a two-second duration each, moving a group element vertically to create the expressive loop.

AArriannePandaraoan
93% match
Loading thumbnail…

Let's make a face with D3.js!

This example displays a smiling face with animated eyebrows built entirely through D3.js v5 DOM manipulation. The SVG face consists of circles for the eyes and head, a path for the mouth, and rectangles for the eyebrows, all positioned relative to a centered group element. Using D3's selection API (`d3.select`, `d3.append`) and the `transition` method, the eyebrows animate vertically over two seconds, moving up and then returning to their original position. The drawing relies on hardcoded numeric coordinates rather than external data.

Aalicenie
93% match
Loading thumbnail…

Let's make a face with D3.js!

A smiling face built from D3.js SVG shapes animates its eyebrows upward and back down. The code uses `d3.select` to append circles, rects, and an `arc()`-generated path onto a 960×500 SVG, with a yellow circular head, black-outlined eyes, and a curved mouth. Eyebrow motion is driven by chained `transition().duration(2000)` calls that translate the eyebrow group, demonstrating sequential SVG attribute tweening.

Ddev-ignacio-h
93% 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
93% match
Loading thumbnail…

Let's make a face with D3.js!

This example builds a smiling face from basic SVG shapes using D3.js, with animated eyebrows that move up and down in a looping transition. The code selects an SVG element, centers a group, and appends a circle for the head, circles for eyes, rects for eyebrows, and a path for the mouth generated with the `d3.arc()` helper. Using `d3.transition()` and `.duration(2000)`, the eyebrows shift vertically twice, creating a repetitive motion. The demonstration focuses on fundamental DOM manipulation—such as `.append()`, `.attr()`, and chained transitions—while rendering entirely in SVG with no external data.

Vveagy
93% 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
93% match