Let's make a face with D3.js!

100%

Let's make a face with D3.js!

✓ Published1🌍 Public

Last edited Jan 18, 2019

Created on Jan 17, 2019

A yellow circle face with red eyes, gray eyebrows, and an arc-based mouth is drawn using D3.js v5. The code builds the face with SVG shapes, including circles for the eyes and a path generated by the `arc` function for the mouth. The eyebrows animate via `transition` and `.duration()`, moving upward and back down. The visualization uses D3's `select` to target the SVG element and positions elements with a centered translation.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Let's make a face with D3.js

A yellow circle with a black outline forms a face, complete with two eyes, animated eyebrows, and an arc-shaped mouth. The eyes and eyebrows are simple SVG circles and rectangles, while the mouth uses a path generated by D3's `arc` function. The eyebrows animate via chained `transition` calls, moving down and back up over two seconds each way. The visualization is built entirely with D3 v5, using its `select` and `arc` modules to render and manipulate SVG elements.

Ffredferramenta

95% match

Loading thumbnail…

Let's make a face with D3.js!

A yellow circle face with eyes, brows, and a mouth is drawn using D3.js v5 SVG primitives. The face is centered via a transformed group, and the eyebrows animate upward and back down using chained `transition().duration()`. The mouth is created with the `d3.arc` shape generator, while circles and rectangles define the eyes and brows. The code imports `select` and `arc` from D3 and uses SVG attributes for positioning.

RRoger Yu-Hsiang Lo

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

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

94% match

Loading thumbnail…

Let's make a face with D3.js!

A cheerful yellow face emerges from a collection of SVG shapes, with red eyes, gray eyebrows, and a fixed arc-based mouth. The example demonstrates D3.js animation through chained `transition().duration()` calls, which sequentially reposition the eyes and eyebrows to create a subtle, shifting expression. The face is built using primitive SVG elements—`circle`, `rect`, and `path`—positioned relative to a central group, with the mouth defined by the `arc()` helper and its properties for inner and outer radius and angle ranges.

LLouis

94% match

Loading thumbnail…

Let's make a face with D3.js!

D3.js v5 draws a yellow circular face with two eyes, animated eyebrows, and a mouth built from an arc path, all centered in an SVG. The eyebrows use chained transitions to move up and down over two-second intervals. The code employs `d3.select`, `d3.arc`, and SVG shapes—circle, rect, and path—to construct the figure, with a red tongue added via a second arc path. Static attributes set positions, while transitions handle the subtle eyebrow animation.

Ccatherinegomes

94% match

Loading thumbnail…

Let's make a face with D3.js!

A yellow circle face with black-outlined eyes and a mouth is drawn using D3.js v5. The code builds SVG shapes with `d3.select` and `d3.arc` for the mouth. Eyebrows are rectangles that animate up and down using chained `transition().duration(2000)` calls, moving via `attr('transform', ...)`. The face is centered by translating a group element based on the SVG’s dimensions. No external data is loaded; all geometry is defined with hardcoded constants.

Xxfqx92

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

94% match