Skip to main content
SimilarExport ZIP
100%

Let's make a face with D3.js!

✓ Published3🌍 Public
JJuyeonee
Last edited Aug 9, 2021
Created on Aug 9, 2021

A face drawn with D3.js appears as a yellow circle with eyes, animated eyebrows, and a mouth. The example demonstrates D3 v7's declarative DOM manipulation, using `d3.select`, `d3.arc`, and chained `transition` calls to animate eyebrow positions. The SVG rendering includes circles, rectangles, and a path defined by arc parameters. The code sets up a central group, positions facial features with explicit coordinates, and applies a two-second eyebrow movement sequence.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Let's make a face with D3js

A yellow circle face with two eyes and animated eyebrows is drawn using D3.js v7. The code uses `select` to target the SVG element, `arc` for the mouth path, and chained `transition().duration()` calls to animate the eyebrows vertically. The construction translates groups via `.attr('transform', ...)` to position facial features relative to the center.

Ppml31780
96% match
Loading thumbnail…

Let's make a face with D3.js

A yellow circle face with black-outlined eyes and eyebrows is drawn using D3.js v5, with the facial features positioned via SVG transforms. The code builds the face programmatically using `d3.select` and `d3.arc` for the mouth, then animates the eyebrows with chained `transition.attr` calls over two seconds each, moving them downward and back upward. The rendering uses SVG elements inside a centered `<g>` group, with dimensions taken directly from the SVG attributes. The example demonstrates basic SVG construction and animation sequencing without external data.

JJasonXQH
95% match
Loading thumbnail…

Let's make a face with D3.js

A yellow circle with a black outline forms a face, complete with two black eyes, rectangular eyebrows, and a mouth drawn as an arc. The right eyebrow animates upward over two seconds using D3's `transition()` method. The example uses D3 v6 modules `select` and `arc` within an SVG, constructing the face from primitive shapes and positioning them via a centered group transform.

DDICKO Alhassane
95% match
Loading thumbnail…

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
95% match
Loading thumbnail…

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
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's make a face with D3.js

This example renders a simple, animated face from basic SVG shapes. A yellow circle forms the head, with two dark circles for eyes and rectangular eyebrows that move up and down. The mouth is drawn as an arc using the D3 `arc` function. The animation is created with D3's `.transition()` and `.duration()` methods, which are used to move the right eyebrow. The entire composition is centered and built within a single `<g>` group using D3's `select` and `append` functions.

Jjcksnm
95% match
Loading thumbnail…

Let's make a face with D3.js

A yellow D3.js face with a black stroke, eyes, and a mouth is drawn in SVG and animates its rectangular eyebrows up and down over two-second transitions. The code uses `select` and `arc` from D3 v5, setting circle radii and positions, and applies chained `transition().duration()` calls to move the eyebrow group. The face is centered in a 960×500 SVG, with the mouth rendered as a donut-like arc path.

Ooptimizeresume
95% match