Skip to main content
SimilarExport ZIP
100%

lets make a face with d3.js!

✓ Published2🌍 Public
Lleopoldovce2
Last edited May 13, 2021
Created on May 12, 2021

A yellow face, built from SVG shapes, is centered and animated in a d3.js visualization. The code uses d3.v6's `select`, `append`, and `attr` to construct the face from circles for eyes, rectangles for eyebrows, and a path created with `d3.arc` for the mouth. The eyebrows perform a repeated vertical transition using d3's `.transition().duration(2000)` over a two-second interval.

AI-generated description

An example including some commonly used features of SVG.

MIT Licensed

Similar vizzes

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
94% 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
94% 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
94% 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
94% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow SVG face with black-outlined eyes and an animated mouth is drawn using D3.js v5. The face is centered via an SVG group transform, with circles for the eyes and an arc-based path for the mouth. Eyebrows are rectangles that transition vertically twice over two seconds using D3's `transition().duration()`. The code uses `d3.select`, `d3.arc`, and SVG attributes like `attr('d', ...)`, rendering entirely in SVG with no external data source.

Ddanielchamone
94% match
Loading thumbnail…

Let's make a face with D3.js

A yellow face with eyes and eyebrows is drawn in SVG using D3.js. The eyebrows animate up and down through chained `transition` and `duration` calls, while the mouth alternates between a frown and a smile using `setTimeout` to invoke a custom `mouthFunction` that redraws an arc path via D3's `arc` generator. The code uses `select`, `append`, and `attr` to build the face from primitive shapes, and `exit` and `remove` to replace the mouth path.

PPiotrekW2
93% 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
93% 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
93% match