Let's make a face with D3.js!

Let's make a face with D3.js!

A yellow circle with two black eyes, animated eyebrows, and an arc-shaped mouth forms a smiling face. The example demonstrates basic D3.js v5 shape generation and SVG manipulation, using `d3.select` to append circles, rectangles, and a path built with `d3.arc`. The eyebrows move up and down via chained `transition().duration()` calls, creating a subtle animated expression. All elements are centered within an SVG of fixed dimensions using a translated group.

DDifan Gu

Let's make a face with D3.js!

A yellow circle with black strokes serves as a face, featuring two eyes, animated eyebrows that move up and down over two-second transitions, and a mouth drawn as an arc. The example demonstrates D3 v5's selection, transition, and arc generators to construct and animate SVG shapes. Eyebrows transition between vertical offsets using `transition().duration()`, while the mouth uses `d3.arc()` with specified inner and outer radii and angular extents. The SVG canvas is centered via a translation transform, and all elements are positioned relative to that origin.

Xxfqx92

Let's make a face with D3.js!

A yellow circle with black outlines forms a smiling face, featuring two eyes, animated eyebrows, and an arc-shaped mouth. The code uses D3.js v5 to append SVG elements, including circles, rectangles, and a path generated with the `arc` generator. Eyebrows move vertically using chained `transition` calls, while the face’s structure relies on SVG grouping and translation transforms. The example demonstrates basic SVG rendering and animation techniques without external data.

NNathan Cheever

Let's make a face with D3.js!

A yellow circle with a black outline forms a face, complete with two eyes, animated eyebrows, and a curved mouth drawn using D3's `arc` generator. Eyebrow rectangles transition vertically via chained `transition().duration()` calls, moving down and back up over two seconds each way. The SVG is centered using a `g` element translated to the middle of a 960×500 viewport, with all shapes positioned relative to that origin. The example uses D3 v5, importing `select` and `arc` from the library.

Sscotti15

Let's make a face with D3.js!

A yellow circle face with black eyes, eyebrows, and a smile is drawn entirely with D3.js v5 SVG primitives, including `circle`, `rect`, and an `arc()` path for the mouth. The face is centered within an SVG using a translated `g` group, and the eyebrows animate upward and back down via chained `transition().duration()` calls. The geometry uses constants for spacing and offsets, and the code demonstrates selection, attribute setting, and the `arc` generator from the `d3` module.

GGPOAdmin

Let's make a face with D3.js

A yellow circle face with black-outlined eyes, eyebrows, and an arc-shaped mouth is drawn using D3.js v5. The SVG elements are centered via a translation transform, and the mouth is created with the `d3.arc` generator. The eyebrows animate up and down using chained `transition().duration()` calls, moving their group container's transform over two seconds each way. The code selects the SVG, sets dimensions from its attributes, and appends all shapes.

GGeolffrey S Mena

Let's make a face with D3.js!

A yellow circle with two eyes, animated eyebrows, and an arc-shaped mouth forms a cartoon face in an SVG canvas. The eyebrows move up and down repeatedly via chained `transition().duration()` calls. Built with D3 v5, the example uses `select`, `append`, and `arc()` to construct the face, positioning elements with SVG transforms and hard-coded dimensions.

Jjesramyep1263

Let's make a face with D3.js!

A yellow circle face with black stroke, white eyes, and an arc-shaped mouth animates through a series of transformations. The eyes, pupils, eyebrows, and mouth scale, rotate, and shift position in sequence using D3.js v5 transitions with `transition.duration`. The SVG is centered via a `g` element translated to the middle of a 960×500 canvas. The code imports `select` and `arc` from D3, using `arc()` to generate the mouth path and chained transitions to create the animated effects.

Iisaachowen