Let's make a face with D3.js

100%

Let's make a face with D3.js

✓ Published1🌍 Public

Last edited Mar 19, 2020

Created on Mar 19, 2020

A yellow face with eyes, animated eyebrows, and a wide mouth is drawn using D3.js v5. The SVG elements are positioned with `d3.select` and attribute setters, while the mouth is generated using the `d3.arc` path generator. Eyebrow rectangles animate vertically via chained `transition().duration()` calls, moving up and down over two seconds. The code imports only `select` and `arc` from D3, applies transforms to group elements, and renders entirely with SVG shapes.

AI-generated description

Loading the d3 script from UNPKG puts a d3 variable in the global namespace. (Take out "browse" from that link to load it.

MIT Licensed

Similar vizzes

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

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

96% match

Loading thumbnail…

Let's make a face with D3.js

A yellow circle face with black-outlined eyes and eyebrows is drawn using D3.js v5, with the facial features positioned via SVG transforms. The code builds the face programmatically using `d3.select` and `d3.arc` for the mouth, then animates the eyebrows with chained `transition.attr` calls over two seconds each, moving them downward and back upward. The rendering uses SVG elements inside a centered `<g>` group, with dimensions taken directly from the SVG attributes. The example demonstrates basic SVG construction and animation sequencing without external data.

JJasonXQH

96% match

Loading thumbnail…

let's make a face with d3.js

A yellow face with two eyes, animated eyebrows, and a mouth is drawn in SVG using D3 v5. The face is centered within a fixed 960x500 canvas, with circles for the head and eyes, rectangles for eyebrows, and a path generated with `d3.arc` for the mouth. Eyebrows animate vertically via chained `transition` calls over 2000ms each, using `attr` to update the transform. The code imports `select` and `arc` from D3 and builds the visual entirely with SVG elements.

Ppengpenghub

96% match

Loading thumbnail…

let's make a face with d3.js

Ppengpenghub

96% match

Loading thumbnail…

Let's make a face with D3.js!

A yellow cartoon face with eyes and a moving mouth is rendered in SVG. D3.js v5 selections construct the head, eyes, and eyebrows, while the mouth uses the `d3.arc` path generator. The eyebrows are animated using chained `transition` calls with a 2000-millisecond duration, shifting them upward and back down. The code imports `select` and `arc` directly from the D3 module.

LLiu2021311512

95% match

Loading thumbnail…

Let's make a face with D3js

A yellow circle face with two eyes and animated eyebrows is drawn using D3.js v7. The code uses `select` to target the SVG element, `arc` for the mouth path, and chained `transition().duration()` calls to animate the eyebrows vertically. The construction translates groups via `.attr('transform', ...)` to position facial features relative to the center.

Ppml31780

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