Skip to main content
SimilarExport ZIP
100%

Let's make a face with D#.js

✓ Published2🌍 Public
IIgor Oliveira
Last edited Jan 4, 2020
Created on Jan 4, 2020

A yellow circle face with black-outlined features animates its right eyebrow in a quick bouncing motion. The face is built entirely with D3.js v5 selections and SVG shapes, including circles for eyes and an arc-generated path for the mouth. The code uses D3's `arc` generator for the mouth, `transition` with `duration` for the eyebrow animation, and positions elements via template-literal transform attributes. The left eyebrow remains static, highlighting the asymmetry of the moving right eyebrow.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Let's make a face with D#.js

A yellow face with black eyes, eyebrows, and a mouth is drawn in SVG using D3 v5. The code builds the face from basic shapes—circles, rectangles, and a path generated with the `arc` API—centered within a 960×500 viewport. The right eyebrow animates with chained `transition` calls that move it down and back up. Static elements are created first, followed by the animated eyebrow.

Jjsong
95% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow SVG face with black-outlined features animates its eyebrows in a repeating up-and-down motion. Built with D3 v5, the example composes circles, rectangles, and an arc-generated path for the mouth on a centered group. D3 transitions with specified durations and movement offsets drive the eyebrow animation, while static attributes define eye spacing, radius, and facial proportions.

Eemanuelemurgolo
94% 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
93% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow circle face with black-outlined features is rendered in SVG, and its eyebrows animate upward and back down over four seconds. Built with D3 v5, the example uses `d3.select` to target the SVG, `d3.arc` to generate the mouth path, and chained `transition().duration()` calls to move the eyebrow group. The face is centered via a translated `g` element, with eye spacing, radius, and eyebrow dimensions defined as constants. No external data is loaded; all shapes are constructed programmatically from hard-coded values.

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

Let's make a face with D3.js!

A smiling face built from D3.js SVG shapes animates its eyebrows upward and back down. The code uses `d3.select` to append circles, rects, and an `arc()`-generated path onto a 960×500 SVG, with a yellow circular head, black-outlined eyes, and a curved mouth. Eyebrow motion is driven by chained `transition().duration(2000)` calls that translate the eyebrow group, demonstrating sequential SVG attribute tweening.

Ddev-ignacio-h
93% match
Loading thumbnail…

Let's make a face with D3.js

A cheerful yellow face composed of D3.js shapes animates as its right eyebrow jumps upward every two seconds. The SVG drawing uses `d3.select` to build circles for the face, eyes, and a donut-shaped mouth from `d3.arc`. The right eyebrow animates via chained `transition().duration(1000)` calls that translate the path vertically, while the left eyebrow remains static. The example loads D3 v7 from the UNPKG CDN and shows basic SVG manipulation and arc geometry rendering.

Gginnyching
93% match