Let's make a face with D3.js!

100%

Let's make a face with D3.js!

✓ Published0🌍 Public

Bbenben1996

Last edited Jan 4, 2019

Created on Dec 25, 2018

A simplified yellow face is drawn from SVG shapes, including a circular head, eyes, eyebrows, and a mouth, centered in a 960×500 viewport. The example demonstrates D3.js v5 selections, the `arc` generator for the mouth path, and chained `transition().duration()` calls that animate the eyebrow group vertically up and down over two seconds each. The code hard-codes all geometry values, such as eye spacing and radius, and uses SVG attributes for styling.

AI-generated description

MIT Licensed

Similar vizzes

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

96% 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

Loading thumbnail…

Let's make a face with D3.js!

A yellow circular face is built from SVG shapes, with two eyes, animated eyebrows, and a semi-circular mouth, all centered on a blank canvas. The code constructs the face using D3.js version 5 selection and arc methods, positioning elements via translations and attributes. Eyebrows transition between two vertical offsets over two seconds each, creating a repeated raising-and-lowering motion. The visualization demonstrates basic SVG drawing and transition animations without external data.

Ppcbt1125

95% match

Loading thumbnail…

Let's make a face with D3.js!

A yellow circular face with black eyes, eyebrows, and a mouth is rendered in SVG. The eyebrows animate upward and then back down over four seconds using chained D3 transitions. The code uses D3 v5 selections and the `d3.arc` generator to draw the mouth, while circles and rectangles create the other features. All elements are centered via a translated group.

Pprat1507

95% match

Loading thumbnail…

Let's make a face with D3.js

A yellow circle face with black-outlined eyes, eyebrows, and an arc-shaped mouth is drawn using D3.js v5. The SVG elements are centered via a translation transform, and the mouth is created with the `d3.arc` generator. The eyebrows animate up and down using chained `transition().duration()` calls, moving their group container's transform over two seconds each way. The code selects the SVG, sets dimensions from its attributes, and appends all shapes.

GGeolffrey S Mena

95% match

Loading thumbnail…

Let's make a face with D3.js!

A yellow SVG face is drawn with D3.js v5, featuring two eyes, animated eyebrows, and a mouth created using the `d3.arc` generator. The face is centered within an SVG canvas, with facial features positioned via translation transforms. Eyebrows animate upward and downward using chained `transition` calls with a 1500-millisecond duration, while the mouth is rendered as an arc path between specified angles. The example demonstrates fundamental SVG shape creation and coordinate manipulation in D3.

Ddtdenver

95% match

Loading thumbnail…

Let's make a face with D3.js!

A yellow circular face with black eyes, eyebrows, and a mouth is drawn using D3.js v5. The code builds SVG elements directly, positioning a central circle, two eye circles, and eyebrow rectangles with a path for the mouth created via `d3.arc`. The eyebrows animate using chained `transition` calls over two seconds each, moving downward and returning upward. All geometry relies on computed spacing and offset constants, with the SVG centered via a `transform` attribute.

Fffrabal

95% match

Loading thumbnail…

Let's make a face with D3.js!

A yellow face is drawn with D3.js as a set of SVG shapes, including a head, eyes, and eyebrows, centered in the viewport. The eyebrows animate, moving up and down in a two-second cycle using D3's `transition` API, while the mouth is created with an `arc` path. The example demonstrates basic shape construction and animation with the D3 v5 library, rendering in SVG.

Ffahmijaafar

95% match