Making Face with D3.js

100%

Making Face with D3.js

✓ Published0🌍 Public

Last edited Dec 29, 2020

Created on Dec 27, 2020

A cheerful yellow face is drawn with D3.js (v6) in an SVG, featuring a circle for the head, two outlined eyes, and an arc-based mouth. The right eyebrow animates upward and back down over four seconds using chained `transition().duration()` calls, while the left stays static. Shapes are built with `select`, `append`, and `arc` from the D3 API, centered via a translated group. The SVG background is LightYellow, and data is hardcoded as numeric constants for positioning.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Let's make a face with D3.js

A cheerful yellow face built with SVG primitives uses D3.js v6 to assemble circles, rectangles, and an arc-based mouth from the `d3.arc` API. The face is centered via an SVG group translation, with eyes and eyebrows positioned using explicit offsets. A `transition().duration(2000)` sequence animates the eyebrow group by shifting its `transform` attribute upward and back, creating a subtle blinking or raising motion. The rendering is entirely SVG-based, with static geometry defined in the initial state.

Xxsg13

94% match

Loading thumbnail…

Making a face with D3.js

A cheerful cartoon face drawn in SVG appears centered on a yellow circle, with two eyes, eyebrows, and a smile created from an arc path. D3.js v6 constructs the shapes using selections and the `arc` generator, while a chained `transition` on the eyebrow group animates it bouncing upward and back down. The face is built from SVG primitives—circles, rectangles, and a path—positioned relative to the viewport’s center, demonstrating common D3 data-joining and transformation techniques without external data.

Aalhdezg

94% match

Loading thumbnail…

Let's make a face with D3.js!

A yellow SVG face with black outlines is drawn using D3.js, featuring circular eyes, rectangular eyebrows, and an arc-based mouth. The eyebrows animate vertically via chained `transition` calls, moving down and back over two seconds each. Using D3 v7, the code selects the SVG, creates a centered group, and builds shapes with `circle`, `rect`, and the `arc` generator for the mouth. The face's proportions are driven by constants like `eyeSpacing` and `eyeRadius`, with no external data source.

Aash301

93% match

Loading thumbnail…

Let's Make a face with D3.js

A cheerful yellow SVG face is drawn using D3.js v5, with a circular head, eyes, eyebrows, and an arc-based mouth. The eyebrows animate vertically via `transition().duration(2000)`, moving down and up in a repeating sequence. The code uses D3’s `select` and `arc` helpers to construct shapes, with coordinates set relative to the SVG’s center. All elements are rendered as SVG primitives, and the animation demonstrates chained transitions on grouped elements.

Kkiyahw1

93% match

Loading thumbnail…

Let's Make a Face with D3.js!

A yellow circle with black eyes, animated eyebrows, and an arc-based smile forms a face in SVG. D3.js v6 uses `select`, `arc`, and method chaining to build the shape, while `transition` animates the brow group up and down. Static elements like circles and rects are grouped with `g` and positioned via `translate`. The code draws entirely from D3 primitives, with no external data, and runs in an 960×500 viewport.

Eegrebing

93% match

Loading thumbnail…

Let's make a face with D3.js

A cheerful SVG face is drawn using D3.js v5, with a yellow circle for the head, eyes, eyebrows, and a mouth created via the d3.arc path generator. The eyebrows animate upward and downward using chained transition calls with a two-second duration each, shifting their group’s transform attribute. All shapes are appended to a centered g element, with positions set through absolute pixel offsets for facial features.

GGeolffrey S Mena

93% match

Loading thumbnail…

Let's make a face with D3.js

A cheerful yellow face, built from SVG primitives, blinks its rectangular eyebrows up and down repeatedly. The example uses D3.js v5 selections and transitions to animate the facial features. A circle forms the head, two circles serve as eyes, and an arc path, generated with the `d3.arc()` helper, creates the mouth. The code constructs the face by appending SVG elements to a group and animates the eyebrows with chained `transition().duration()` calls.

Lluckytrue

93% match

Loading thumbnail…

Let's make a Face with D3.js

A yellow SVG face is drawn with D3.js, centered in a 960×500 viewport and constructed from circles, rectangles, and an arc for the mouth. D3 transitions (`.transition().duration(2000)`) repeatedly raise and lower the eye-brow rectangles over four seconds, creating a simple animated expression. The code imports `select` and `arc` from D3 v5, uses d3.arc to build the mouth path, and sets all positions via SVG attributes.

Jjerz-0788

93% match