Let's make a face with D3.js

100%

Let's make a face with D3.js

✓ Published1🌍 Public

Last edited Sep 30, 2020

Created on Sep 30, 2020

This example shows a cheerful face constructed from basic SVG shapes—a yellow circle for the head, two smaller circles for eyes, rectangles for eyebrows, and an arc-based path for the mouth. The code uses D3.js v5 selections to append elements to an SVG canvas, with a centered group translation for positioning. The left eyebrow and mouth animate via chained `transition().duration()` calls, altering their `y` and `d` attributes respectively. The mouth leverages `d3.arc()` to generate path data between two arc configurations, demonstrating shape interpolation.

AI-generated description

A bare minimum HTML page.

Similar vizzes

Loading thumbnail…

Let's make a face with D3.js!

This example shows a friendly yellow face built entirely with SVG shapes, whose eyebrows animate upward and then back down in a looping motion. The face is constructed using D3.js v5 selections to append a circle for the head, additional circles for the eyes, rectangles for the eyebrows, and a path generated with the `d3.arc()` function for the mouth. The code uses `transition()` with a 2000-millisecond duration to animate the eyebrow group’s `transform` attribute. All elements are centered within an SVG canvas using a translation transform, and the styling is handled by an external stylesheet.

Ddacoylo

95% match

Loading thumbnail…

Let's make a face with D3.js!

This example draws a smiling yellow face out of SVG shapes using D3.js v5. It constructs a circle for the head, two circles for eyes, rectangles for eyebrows, and an arc path for the mouth, all centered on an SVG canvas. The eyebrows animate upward and back down over four seconds using chained `transition` calls with a two-second duration each. The code relies on D3’s `select` and `arc` functions to build the scene entirely from static attributes, with no external data source.

Fforcox43

95% match

Loading thumbnail…

Let's Make a Face with D3.js

This example builds a stylized face from basic SVG shapes—a yellow circle for the head, two eyes, animated eyebrows, and an arc-based mouth—centered within an SVG canvas. The code uses D3.js v5 selections and the `arc` generator to construct the mouth path, while `transition()` animates the eyebrows in a looping up-and-down motion. React serves as the hosting framework, and rendering relies on SVG elements with D3’s declarative attribute chaining.

Nnkrpyate

95% match

Loading thumbnail…

Let's make a face with D3.js!

This example displays a simple yellow face composed of SVG shapes, including eyes, eyebrows, and a mouth, all built programmatically with D3.js. The face is centered within a fixed viewport using a group transformation. The code uses D3’s `select` to target the SVG element and `append` to construct each shape, while the `arc` function generates the mouth’s path. An animated eyebrow movement is achieved by chaining multiple `transition().duration()` calls, which sequentially shift the eyebrow group’s vertical position.

Ccledevoute

95% match

Loading thumbnail…

Let's make a face with D3.js

A yellow circle face with black eyes and expressive eyebrows is drawn using D3.js v5 in an SVG. The code uses `select` to access the pre-defined SVG element, `arc` to generate the mouth path, and chained `transition().duration()` calls to animate the right eyebrow bouncing upward and downward. The face is centered using a translated `g` group, with hardcoded numeric values for spacing, radii, and offsets defining all facial features.

AAtarius Armstrong

95% match

Loading thumbnail…

Let' make a face with D3.js

A cheerful cartoon face, centered on a yellow SVG circle, is assembled from simple geometric shapes and set in motion. The left and right eyes and rectangular eyebrows are positioned relative to the face’s center, and the entire eyebrow group animates upward and then back down over four seconds using chained `transition` calls on the D3 selection. A mouth is drawn as a semi-circular arc using the `arc` generator from D3’s shape utilities. The example uses D3 v5 with the React starter template, operating on SVG elements within a 960×500 viewport.

Eelenap-sportsbet

94% match

Loading thumbnail…

Let's make a face with D3.js

The example shows a simple emoticon-like face constructed from SVG shapes, including a yellow circle, two eyes, two eyebrows, and an arc-shaped mouth. Using D3.js v5, the code leverages the `select` and `arc` APIs to build and position the face elements, and an animation sequence via `transition` moves the eyebrows up and down over two seconds. All parts are drawn as SVG primitives within a 960x500 canvas, centered using a translated group.

MMatthiasVanCampen

94% match

Loading thumbnail…

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

94% match