Let's make a face with D3.js!

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 smiley face drawn with SVG shapes animates its eyebrows in a looping motion. The example demonstrates basic DOM manipulation and transitions in D3.js v5, using `d3.select` to append circles, rectangles, and an arc-generated path for the mouth. Eyebrow movement is driven by chained `transition().duration()` calls that shift the group's `transform` attribute up and down. The face is centered via an SVG group with translated coordinates, and all styling is handled through inline attributes and a linked stylesheet.

Iidwann-eng

Let's make a face with D3.js!

This example shows a smiley face built with D3.js, featuring expressive eyebrows that animate up and down over a two-second cycle. The face is constructed by manipulating SVG elements, including circles for the eyes and a path for the mouth, all grouped and positioned via translation transforms. The animation is driven by a chained sequence of `transition().duration()` calls, which move the eyebrows group along the y-axis. The code imports `select` and `arc` from D3, using the latter to generate the mouth’s arc path geometry.

Jjesramyep1263

Let's make a face with D3.js!

This interactive example shows a smiley face with animated eyebrows built using D3.js. The face is composed of SVG shapes—a yellow circle for the head, two circles for eyes, rectangles for eyebrows, and a path for the mouth—all centered via a transformed group. The eyebrows move up and down using chained `transition` calls with a 2000-millisecond duration. The code uses D3 v5 selectors to query the SVG, `arc` to generate the mouth’s path, and direct attribute setters for positioning.

Kkesmith21

Let's make a face with D3.js!

A smiley face drawn with SVG shapes animates its eyebrows in a looping motion. The example demonstrates fundamental D3.js DOM manipulation by using `select` to target SVG elements and `append` to build circles, rectangles, and a path arc for the mouth. A chained `transition().duration()` sequence moves the eyebrow group up and down over two-second intervals. The face is centered on a 960-by-500 viewport, with all coordinates offset from the middle via a translation transform.

CCameron

Let's make a face with D3.js!

A smiley face drawn with D3.js animates its eyebrows in a looping up-and-down motion. The example demonstrates fundamental SVG construction using D3 selections and shape generators, building the face from a yellow circle, two eyes, rectangular eyebrows, and an arc-based mouth. The eyebrows transition vertically via chained `transition().duration()` calls, while `d3.arc` computes the mouth path. The code uses `select` and `arc` from D3 v5, with all elements positioned through SVG attributes.

VVerdidk

Let's make a face with D3.js!

A smiley face built with D3.js demonstrates basic DOM manipulation. The SVG face has blue circular head, green eyes, and an arc-based mouth, with rectangular eyebrows that animate up and down using chained `transition` calls. The code uses d3.select to target the SVG, d3.arc to generate the mouth path, and attribute methods like `.attr` to position elements. Eyebrow movement is achieved through sequential `.transition().duration()` operations that translate the eyebrow group vertically.

DDaniel Piqué

Let's make a face with D3.js!

This example constructs a smiley face out of SVG shapes and animates its eyebrows. Using D3.js v5, the code selects the SVG canvas, appends groups and primitive shapes like circles, rectangles, and an arc-based mouth, and positions them with transform attributes. The eyebrows are rectangles that use chained `transition` calls to move up and down over 2-second intervals. This demonstrates fundamental DOM manipulation and basic animation, where the underlying data is the hardcoded positional values and dimensions for each facial feature.

KKoustubhK2618