D3Training

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!

A yellow smiley face with black eyes and a curved mouth is drawn on an SVG canvas using D3.js. The example demonstrates fundamental DOM manipulation with methods like `select`, `append`, and `attr` to create circles, rectangles, and a path generated with the `arc` function. Animated eyebrows, rendered as rectangles, move up and down via chained `transition` calls with a 2000-millisecond duration, showcasing basic animation in D3 v6.

Bbbak92

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 is an animated smiley face built with D3.js (v5) that demonstrates fundamental DOM manipulation. The face is constructed from SVG primitives, including a yellow circle for the head, two circles for eyes, and a path created with the `d3.arc` API for the mouth. The example uses D3's `transition().duration(2000)` to animate the eyebrows (rectangles) moving up and down in a two-step sequence. The entire composition is centered within an SVG canvas using an SVG transform.

SStellaSong1

Let's make a face with D3.js!

This example illustrates fundamental DOM manipulation with D3.js by building a smiley face from SVG primitives. A yellow circle forms the head, with two eye circles, a mouth path created using the `arc` generator, and rectangular eyebrows. The animation uses chained `transition()` calls to animate the eyebrow group's `transform` attribute upward and then back down over two seconds each, creating a simple moving expression. The code relies on `svg.append`, `.attr`, and D3's selection and transition APIs, rendering entirely through SVG without external data.

Mmariamy

Let's make a face with D3.js!

This example demonstrates fundamental DOM manipulation with D3.js by building an animated smiley face from SVG shapes. A yellow circle forms the head, with eyes, eyebrows, and a mouth added as separate elements. The code uses d3.select and append to construct the face, then applies chained transitions to move the eyebrows up and down repeatedly. The mouth is drawn using d3.arc with specified inner and outer radii and angles. All shapes are positioned relative to a centered group, with animation running for two seconds per eyebrow movement cycle.

Wwhyamn

Let's make a face with D3.js!

This example shows a yellow smiley face built with SVG shapes whose eyebrows animate upward and downward in a looping motion. The code demonstrates fundamental D3.js DOM manipulation by selecting the SVG canvas, appending groups for positioning, and constructing circles, rectangles, and an arc-based mouth using `d3.select`, `d3.arc`, and chained `transition().duration()` calls. The face is centered via a translated group, with all coordinates calculated relative to the viewport dimensions.

Ggcappadaniel

Let's make a face with D3.js!

This example uses D3.js to build an animated smiley face with SVG elements, demonstrating fundamental DOM manipulation and transitions. Circles form the yellow head and eyes, while rectangles serve as eyebrows that move via chained `transition` calls. A black mouth is drawn using `d3.arc`, with its shape morphing between smile and frown through `attrTween` and an interpolator. The code relies on D3 v5’s selection methods, `arc`, and transition API to animate the facial features in sequence.

KKrister