Let's make a face with D3.js!

100%

Let's make a face with D3.js!

✓ Published1🌍 Public

Last edited Jan 4, 2020

Created on Jan 4, 2020

A yellow circle face with black-outlined eyes, eyebrows, and an arc-shaped mouth is drawn in SVG using D3.js v5. The eyebrows animate upward and back down over two seconds via chained `transition()` calls with `duration(2000)`. The code uses `d3.select`, `d3.arc`, and attribute manipulation to construct the face, with coordinates centered on an SVG canvas.

AI-generated description

MIT Licensed

Similar vizzes

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 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 circle head with black-outlined eyes, animated eyebrows, and a curved mouth is drawn in an SVG canvas using D3.js. The face is centered and constructed from primitive shapes, with eyebrows transitioning vertically over two seconds using `transition().duration(2000).attr('transform')`. The mouth is created via `arc()` with specified radii and angles. D3's `select` and `append` APIs build the SVG hierarchy.

Ffloresh

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 circle with black eyes, eyebrows, and a curved mouth forms a simple face on an SVG canvas, centered via a D3-selected group. The eyebrows animate upward and back down using chained `transition.attr` calls over two two-second intervals. The mouth is drawn with the `d3.arc` path generator, while all shapes are appended and styled through D3 v5’s selection and attribute methods.

KKelvin Yuen

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

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

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 in SVG using D3.js v6. The face’s eyebrows animate upward and back down over four seconds via chained `transition().duration()` calls on an SVG group’s `transform` attribute. The mouth is created with the `d3.arc()` helper, while circles and rectangles compose the eyes and brows, all centered within an SVG canvas using a translated group.

Iihatelearning

96% match