Let's make a face with D3.js!

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

Let's make a face with D3.js!

This example demonstrates building a smiling face with D3.js, where the eyebrows animate by moving up and down. The face is constructed using SVG shapes, including circles for the head and eyes, rectangles for the eyebrows, and a path for the mouth created with the `arc` generator. The code utilizes `transition().duration(2000)` to animate the eyebrows, shifting their containing group’s transform attribute. The visualization is rendered in an SVG canvas with a 960x500 viewport, using D3 v5.

Mmhdpessanha

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

Let's make a face with D3.js!

A smiley face drawn in SVG animates as its eyebrows bounce upward and settle back down. The example demonstrates fundamental D3.js DOM manipulation by constructing the face from appended shapes—circles for the eyes and head, rectangles for the eyebrows, and a path generated with the `arc` helper for the mouth. A chained `transition` with a two-second duration moves the eyebrow group twice, creating the animation. The code uses D3 v5 selections and attributes on a static SVG canvas.

Eevesshaw

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

Let's make a face with D3.js!

AArriannePandaraoan

Let's make a face with D3.js!

This example constructs a smiley face using SVG primitives in D3.js, then animates its eyebrows in a looping motion. The face is built by appending circles, rectangles, and a path to an SVG group, with the mouth created using the `d3.arc` shape generator. Eyebrows are rectangles that move vertically via chained `transition().duration(2000)` calls to `attr('transform')`, creating a bouncing effect. The code demonstrates basic DOM manipulation and animation with D3’s selection and transition APIs.

Jjesramyep1263

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