Skip to main content
SimilarExport ZIP
100%

let's make a face with d3.js

✓ Published2🌍 Public
Ppengpenghub
Last edited Mar 8, 2020
Created on Mar 8, 2020
Forked from HTML Starter

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.

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

Let's make a face with D3.js

A yellow circle face with black eyes and expressive eyebrows is drawn using D3.js v5 in an SVG. The code uses `select` to access the pre-defined SVG element, `arc` to generate the mouth path, and chained `transition().duration()` calls to animate the right eyebrow bouncing upward and downward. The face is centered using a translated `g` group, with hardcoded numeric values for spacing, radii, and offsets defining all facial features.

AAtarius Armstrong
96% 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
96% match
Loading thumbnail…

Let's make a face with D3.js!

A cheerful yellow face is drawn with D3.js, featuring circular eyes, rectangular eyebrows, and a curved mouth, all rendered as SVG elements. The eyebrows animate up and down over two seconds using D3 transitions. The code uses `d3.select`, `d3.arc`, and SVG shape methods like `append`, `attr`, and `transition` to build the face within a 960x500 viewport, centering the elements with a group transform.

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

Let's make a face with D3.js

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.

MmangoJ0106
96% match
Loading thumbnail…

let's make a face with d3.js

A yellow circle face with black eyes, animated eyebrows, and a curved smile is drawn using D3.js v5. The example builds the face with SVG shapes, including `circle` and `rect` elements, and an `arc` path for the mouth. Eyebrows transition vertically up and down over two seconds using `transition.attr`. The code imports `select` and `arc` from d3, sets an initial SVG size, and groups elements around a centered translation.

BBun
96% match