Make a face with D3.js

Let's make a face with D3.js

A smiling face is drawn as a yellow circle with two eyes, animated eyebrows, and an arc-shaped mouth, all rendered in SVG. The animation uses D3 transitions to move the eyebrows up and down over two seconds. The code leverages `d3.select`, `d3.arc`, and SVG `circle`, `rect`, and `path` elements within a fixed 960×500 viewport, with the face centered via a group transform.

NNkwachi Abel

Make a face with D3.js

A yellow face built from SVG primitives sits centered in the canvas, with two circles for eyes, two rectangles as eyebrows, and a path-based mouth using `D3.arc`. The eyebrows animate upward and then back down over two seconds using D3’s `.transition().duration()` API, creating a subtle, repeated motion. The code imports `select` and `arc` from D3 v6 within a React framework, and renders entirely through SVG elements positioned via transforms.

CChinzorigt Ganbat

Let's make a face with D3.js

A smiling face made of SVG shapes is drawn on a yellow circle, with eyes, eyebrows, and a mouth defined by D3.js selections and the `arc` generator. The eyebrows animate vertically via chained `transition().duration(2000)` calls, shifting down and then returning. The code imports `select` and `arc` from D3 v5, positions elements using `attr` with computed coordinates, and renders in a React-based HTML page with an SVG canvas.

JJaKokosz

Make a face with the use of D3.js

A yellow SVG face with black-outlined features animates its eyebrows and mouth. D3.js v6 shapes the face using `arc()` for the smile and appended `circle` and `rect` elements for the eyes and brows. Chained `transition()` calls with a two-second duration repeatedly move the eyebrows upward and adjust the mouth’s inner and outer radii, creating a looping expression. The face is centered and scaled using the SVG’s dimensions in a React-based starter.

Ssimon0863

Let's make a face with D3.js!

A smiling face is rendered as a yellow circle with black eyes, animated eyebrows, and a curved mouth built from an arc path. The code uses D3 v5 selections to append SVG shapes, and chains `transition().duration()` calls to move the rectangular eyebrows up and down. The mouth is generated with the `d3.arc()` helper, specifying inner and outer radii and angular extents. Static circle elements define the face and eyes, while the animation runs once on load in a React framework.

Llittlenanopichu

Let's make a face with D3.js!

A smiling cartoon face is drawn with SVG shapes using D3.js v5, featuring animated eyebrows that move downward and back upward over two seconds. The face uses a yellow circle, black stroke, and an arc-generated mouth with `d3.arc`. Code imports `select` and `arc` from D3, applying chained `transition().duration()` calls to animate the eyebrow group’s transform. React is noted in metadata, though the example runs as a standalone HTML page with a static SVG canvas.

Iidwann-eng

Lets make a face with D3

Using D3.js v5 within a React framework, this SVG animation constructs a smiling yellow face from basic geometric shapes. The code draws concentric circles for the head, eyes, and an arc-generated mouth, with rectangular eyebrows that animate vertically twice over four seconds. The face is centered via a translated group element, and all coordinates are computed from window dimensions. The piece uses D3's `select`, `arc`, and chained `transition().duration()` calls to move the brows, demonstrating how primitive primitives combine into expressive characters.

Aatayyaba

Make a Face with D3

This example demonstrates how to construct a smiling face using D3 version 6 and React. It builds the face from SVG shapes—a yellow circle for the head, two black circles for eyes, and a path for the mouth—all centered and scaled with data from the SVG's width and height attributes. The eyebrows are animated using D3's `transition` API, moving them vertically over two sequential 2-second intervals. The code leverages D3's `select`, `arc`, and `attr` methods, along with React's `render` function to manage the SVG output.

GGordon Yang