Skip to main content
SimilarExport ZIP
100%

Making a Face with D3!

✓ Published4🌍 Public
AAnnie Liao
Last edited Jun 6, 2020
Created on Jun 6, 2020

A face composed of yellow circle, eyes, eyebrows, and a mouth is drawn with SVG using D3 v5. The brows animate vertically via chained `transition()` calls, moving down then back up. The code uses D3’s `select`, `arc`, and `attr` for shape creation and positioning, with a React-free setup rendering into a static SVG.

AI-generated description

A bare minimum HTML page.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Let's Make a Face with D3.js

A yellow face with eyes, eyebrows, and a mouth is built from SVG shapes using D3.js v5. The code uses `d3.select` and `d3.arc` to construct the face, with circles for eyes and a path for the mouth. Eyebrows are rectangles that animate via `transition.attr` over two seconds, moving up and down. The rendering is SVG-based, centered in a 960×500 viewport, with static geometry defined by numeric constants.

AAloysius
94% match
Loading thumbnail…

Make a Face with D3.jh

A yellow circle becomes a face with animated eyebrows, eyes, and a mouth rendered in SVG. The example uses D3 v5 selections and transitions to build the facial features, with `transition().duration()` moving the eyebrows up and down in a repeating loop. The mouth is drawn using the `d3.arc()` path generator, while the face's structure relies on nested groups and coordinate offsets. The code imports `select` and `arc` from D3 and runs inside a React framework setup with bundled JavaScript.

MMichelle Mac
94% match
Loading thumbnail…

Make a Face with D3.jh

A yellow circle becomes a face with animated eyebrows, eyes, and a mouth rendered in SVG. The example uses D3 v5 selections and transitions to build the facial features, with `transition().duration()` moving the eyebrows up and down in a repeating loop. The mouth is drawn using the `d3.arc()` path generator, while the face's structure relies on nested groups and coordinate offsets. The code imports `select` and `arc` from D3 and runs inside a React framework setup with bundled JavaScript.

MMichelle Mac
94% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow circle face with black eyes, animated eyebrows, and a curved mouth is built using D3.js v5 and rendered as SVG. The code uses `d3.select`, `d3.arc` for the mouth path, and chained `transition().duration()` calls to move the rectangular eyebrows vertically. Static attributes set the face and eye positions, while the eyebrows animate in opposing time sequences. The example runs in a React framework and draws on a 960×500 SVG canvas.

SShabani Muswamba
93% match
Loading thumbnail…

Make a face with D3.js

A yellow face built from SVG primitives sits centered in the canvas, with two circles for eyes, two rectangles as eyebrows, and a path-based mouth using `D3.arc`. The eyebrows animate upward and then back down over two seconds using D3’s `.transition().duration()` API, creating a subtle, repeated motion. The code imports `select` and `arc` from D3 v6 within a React framework, and renders entirely through SVG elements positioned via transforms.

CChinzorigt Ganbat
93% match
Loading thumbnail…

Let's make a face with D3!

A yellow face with black outlines is drawn using D3 selections and SVG shapes, including circles for the head and eyes and rectangles for eyebrows. The eyebrows animate up and down via chained `transition().duration()` calls, while a mouth is created using the `d3.arc()` generator. The code uses `d3.select` and `d3.arc` from D3 v6, with explicit SVG attributes for positioning and sizing.

Ffabricio3g
93% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow circle face is drawn with D3.js, featuring two eyes, animated eyebrows, and a smile-shaped mouth rendered as an arc. The SVG is centered and built using D3 selections, with the mouth created via the `arc` generator. Eyebrows transition vertically using `transition().duration(2000)`, shifting their position over two seconds before settling. The example uses D3 v5 within a React framework, rendering all elements as SVG with animation.

SSunil Skanda
93% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow circle face with black-outlined eyes and a curved mouth is rendered inside an SVG, centered via a D3 selection and translation. Two eyebrow rectangles loop through a 2000-millisecond animated bounce using chained `transition` calls with `attr`. The mouth is drawn with `d3.arc()`, and all shapes are positioned relative to the SVG's center point.

Zzlastefcia
93% match