Let's make a face with D3.js

100%

Let's make a face with D3.js

✓ Published6🌍 Public

Last edited Apr 7, 2021

Created on Apr 7, 2021

Forked from Hello D3

This example draws a stylized yellow face in SVG using D3.js, with circles for eyes, rectangles for eyebrows, and an arc-generated path for the mouth. The eyebrows animate upward and back down via chained `transition().duration()` calls on a group element. All shapes are positioned relative to a centered `<g>` container, using D3 selections and the `arc()` generator from the d3-shape module to construct the mouth.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Let's make a face with D3.js

This example renders a simple, animated face from basic SVG shapes. A yellow circle forms the head, with two dark circles for eyes and rectangular eyebrows that move up and down. The mouth is drawn as an arc using the D3 `arc` function. The animation is created with D3's `.transition()` and `.duration()` methods, which are used to move the right eyebrow. The entire composition is centered and built within a single `<g>` group using D3's `select` and `append` functions.

Jjcksnm

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

94% match

Loading thumbnail…

Let's make a face with D3.js

A cheerful SVG face is drawn using D3.js v5, with a yellow circle for the head, eyes, eyebrows, and a mouth created via the d3.arc path generator. The eyebrows animate upward and downward using chained transition calls with a two-second duration each, shifting their group’s transform attribute. All shapes are appended to a centered g element, with positions set through absolute pixel offsets for facial features.

GGeolffrey S Mena

94% match

Loading thumbnail…

Let's make a face with d3.js

This example builds a stylized yellow face from basic SVG shapes using D3 v5. The face features animated eyebrows, eyes, and an arc-based mouth, all centered within an SVG canvas. The eyebrows transition vertically via `transition().duration(2000)` to create a subtle bobbing motion, while the mouth is drawn using the `arc()` generator. The code uses `select()` to manage SVG elements and demonstrates ES6 module imports for structured D3 code.

Pparkypoo

94% match

Loading thumbnail…

Let's Make a face with D3.js

A yellow circle forms a face with two black eyes, eyebrows, and an arc-shaped mouth. The eyebrows animate upward and then back down repeatedly using chained `transition` calls on a `<g>` element. Built with D3 v5, the example selects the SVG, centers a group, and constructs shapes with `circle`, `rect`, and `path` elements. The mouth uses the `arc` generator with specified inner and outer radii and angles, all rendered as static SVG with JavaScript-driven animation.

Kkiyahw1

94% match

Loading thumbnail…

Let's make a face with D3.js

A face is drawn with SVG shapes: a yellow circle for the head, two circles for eyes, rectangles for eyebrows and nose, and an arc path for a mouth. The eyebrows and nose animate up and down using chained D3 transitions. The example uses D3.js v5, appending shapes to an SVG group centered in the canvas, with styling from a CSS file.

PPourmahmood

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…

Lets make a face with D3

This example draws a stylized face in SVG using D3 v5, compositing a yellow circle for the head, two eyes, animated eyebrows, and a mouth path. The eyebrows are rectangles that toggle between two vertical positions over two seconds using D3's `transition` API, creating a subtle blinking or winking effect. The mouth is created with `d3.arc` to generate a crescent-shaped path. All geometry is positioned relative to the center of a 960×500 canvas, with coordinates computed from width and height attributes. The rendering relies on SVG elements and animation via chained transitions.

Aaruba-haroon

94% match