Let's make a face with D3.js!

Let's make a face with D3.js!

This example draws a yellow smiley face with D3.js, showing how to build and animate SVG shapes through fundamental DOM manipulation. The face is composed of circles for the eyes and an arc-generated mouth, while the code uses `transition.attr` to move its rectangular eyebrows up and down over two-second intervals. It uses D3 v5’s `select`, `attr`, `append`, and `arc` API to construct the scene, with all elements centered via an SVG `<g>` transform. The animation repeats once, demonstrating chained transitions on SVG attributes.

Wwen787

Let's make a face with D3.js!

Wwen787

Let's make a face with D3.js!

This example builds a smiley face with D3.js, demonstrating fundamental DOM manipulation and animated transitions. Using SVG elements, it constructs a yellow circle head, two eyes, rectangular eyebrows, and an arc-shaped mouth via the `arc()` generator. The code selects the SVG and appends groups to position features, then uses `transition().duration()` to animate the eyebrows upward and back down over four seconds. The example showcases D3 v5’s data-join-free approach, relying on direct selection, attribute setting, and chained transitions to create a simple, expressive character animation.

KKurt J Nilsen

Let's make a face with D3.js!

This gallery example builds a yellow smiley face in an SVG canvas using D3.js v5. The face is assembled from primitive shapes—circles for the head and eyes, rectangles for eyebrows, and a path for the mouth—all positioned via D3’s `select` and `append` methods. The animation uses D3’s `transition` API to move the eyebrows up and down over two seconds, demonstrating basic DOM manipulation and chained transitions. The code defines all geometry explicitly without external data, relying on D3’s `arc` generator for the mouth’s curved path.

AAndrew Yan

Let's make a face with D3.js!

This example demonstrates how D3.js can build an animated smiley face from SVG primitives, showing a yellow circle head with black eyes, arched eyebrows, and a mouth. The eyebrows transition up and down repeatedly over two-second intervals using chained `transition().duration()` calls. The code uses D3 v5 selections, the `arc` generator to create the mouth path, and SVG attribute binding for positioning. All elements are centered dynamically using the SVG’s width and height, with facial features offset by fixed pixel values.

JJishen Xu

Let's make a face with D3.js!

This example demonstrates how to build a simple animated smiley face using D3.js. It shows a yellow circle with eyes, eyebrows, and a mouth, all constructed through fundamental DOM manipulation. The code uses `d3.select` to target the SVG element, `d3.append` to create shapes, and a chained `d3.transition` sequence to animate the eyebrows moving up and down over two-second intervals. The mouth is drawn as an arc using `d3.arc` with specified inner and outer radii. The rendering is SVG-based, with all elements positioned relative to the center of the canvas.

KKarkG

Let's make a face with D3.js!

This example builds a cheerful yellow smiley face using D3.js v5, rendered as SVG elements. The face is composed of circles for the head and eyes, rectangles for eyebrows, and an arc-generated path for the mouth. The code demonstrates fundamental DOM manipulation with `d3.select` and `d3.append`, while `d3.arc` creates the mouth shape. An animation driven by chained `transition` and `attr` methods moves the eyebrows up and down over a four-second cycle, showcasing how D3 transitions can animate SVG attributes.

EEL MAHI Moncef

Let's make a face with D3.js!

This example uses D3.js to construct a simple animated smiley face in SVG. The code builds the face from basic shapes—a yellow circle for the head, two eyes, eyebrows, and an arc-based mouth—and demonstrates D3's DOM manipulation and transition API. The eyebrows animate by moving up and down via chained `transition().duration(2000)` calls on the SVG group containing the rectangles, shifting the group's transform attribute. The visualization uses `d3.select` and `d3.arc` to generate the mouth path, with all elements centered in a 960-by-500 canvas.

Ssathesujit