Skip to main content
SimilarExport ZIP
100%

Let's make a face with D3.js

✓ Published2🌍 Public
GGabe Nascimento
Last edited Oct 13, 2021
Created on Oct 11, 2021

A smiling yellow face is drawn in an SVG canvas using D3.js, with eyes, eyebrows, and a mouth positioned relative to a centered group. Eyebrows animate upward and back down via chained `transition().duration()` calls, moving the group's transform attribute. The code uses `d3.select`, `d3.arc` for the mouth's shape, and explicit SVG `circle`, `rect`, and `path` elements. The face is styled with a light blue background and black strokes, all rendered dynamically from the viewport height and width.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Let's make a face with D3.js!

A smiling face rendered in yellow dominates the SVG canvas, with eyes, eyebrows, and a curved mouth built from basic D3 shapes. The animation shows the eyebrows shifting upward over two seconds and then returning, using chained `transition().duration()` calls. The code constructs the face with `select`, `append`, and `arc` from D3 v5, positioning elements via `attr('transform')` with string translation. The path for the mouth is generated by the arc helper, and all drawing occurs through SVG element creation.

Nnicfavfar
96% match
Loading thumbnail…

Let's make a face with D3.js!

A smiling face rendered in SVG uses D3.js to build its geometry, including a yellow circle, two eyes, a mouth via `d3.arc`, and rectangular eyebrows. A `transition` on the eyebrow group animates their vertical position over two seconds, moving them up and down repeatedly. The code employs `d3.select`, `d3.scaleLinear`, and attribute setters to construct the scene, with a fixed SVG canvas sized 960 by 500 pixels.

Ppanmenghan
96% match
Loading thumbnail…

Let's make a face with D3.js!

A smiling face drawn with SVG shapes—a yellow circle, two eyes, and an arc-shaped mouth—bobs its rectangular eyebrows up and down in a repeating two-second animation. The D3.js code constructs the face using `d3.select` and `d3.arc`, then applies chained `transition().duration()` calls to animate the eyebrow group’s vertical position. Rendering occurs in an SVG canvas at 960 by 500 pixels, with all coordinates centered via a translated group.

RRafael Campos
96% match
Loading thumbnail…

Let's make a face with D3.js

A yellow circle with black facial features forms a smiley face on an SVG canvas. Two eyes and a mouth are drawn using D3 shapes, while a pair of dark eyebrows animate vertically in a looping transition, moving up and then back down. The face is centered via a group transform, with the mouth created using the d3.arc path generator. The animation uses chained transition calls on an SVG group element to shift the eyebrows repeatedly.

HHasideluxe
95% match
Loading thumbnail…

Let's make a face with D3.js!

A smiling yellow face is drawn in SVG using D3.js, with circular eyes, a curved mouth built from `d3.arc`, and rectangular brows that animate upward and back down via `transition`. The face is centered in a 960-by-500 viewport, with groups offsetting the eyes and brows for spatial organization. The code uses d3.select and d3.arc, along with chained transitions on the brows group to create a simple expression change.

CCalvin Gomez
95% match
Loading thumbnail…

Let's make a face with D3.js!

D3.js constructs a smiling face from SVG shapes, including a yellow circle for the head, two eyes, and an arc-based mouth using the `d3.arc()` generator. The eyebrows, rendered as rectangles, animate vertically through chained `transition().duration()` calls, moving up and down over two seconds each. The code uses D3 selections and attributes to position elements around a centered group, with all coordinates based on the SVG’s 960×500 dimensions.

Ddtdenver
95% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiling face is drawn entirely with D3.js SVG shapes, including a circular head, two eyes, animated eyebrows, and an arc-based mouth. The eyebrows and left eyebrow rectangles move up and sideways in a looping 2000-millisecond transition, while the mouth uses the d3.arc generator with specified inner and outer radii and angles. The code selects the SVG element, centers a group via translation, and applies chained transitions to animate the facial features.

PPetter-Smit
95% match
Loading thumbnail…

Let's make a face with D3.js

A yellow circular face with black eyes, eyebrows, and a curved mouth is drawn and animated using D3.js v5. The code builds the face with SVG shapes, positioning elements relative to the center of a 960×500 canvas. Eyebrows rise and fall repeatedly via chained `transition().duration(2000)` calls on the parent group. The mouth is generated using the `d3.arc()` helper with specified inner/outer radii and angular span, while the `select` API attaches elements to the SVG root.

PpilafGB62
95% match