Lets make a face with D3

100%

Lets make a face with D3

✓ Published0🌍 Public

Last edited Mar 24, 2020

Created on Mar 24, 2020

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.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Let's make a face with D3.js

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.

HHe Jianfeng

94% match

Loading thumbnail…

Lets make a face with D3.js

This example uses D3.js to draw a simple cartoon face with SVG shapes. A yellow circle forms the head, with two smaller circles for eyes and rectangles for eyebrows, all positioned relative to the center of the SVG canvas. A mouth is created using the `d3.arc` helper to generate a curved path. The eyebrows animate with `transition.duration`, moving down and back up over two seconds, demonstrating basic SVG rendering and animation capabilities in D3 v5.

TTikiWayne

94% 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 yellow circle with black strokes serves as a face, featuring two eyes, animated eyebrows that move up and down over two-second transitions, and a mouth drawn as an arc. The example demonstrates D3 v5's selection, transition, and arc generators to construct and animate SVG shapes. Eyebrows transition between vertical offsets using `transition().duration()`, while the mouth uses `d3.arc()` with specified inner and outer radii and angular extents. The SVG canvas is centered via a translation transform, and all elements are positioned relative to that origin.

Xxfqx92

94% match

Loading thumbnail…

Lets make a face with D3.js

This example draws a simple cartoon face with a yellow circular head, two eyes, animated eyebrows, and a curved mouth. The face is centered in an SVG canvas, and the eyebrows move up and down repeatedly using chained `transition` calls. The code uses D3 v5 selections to build the shapes, including `arc()` for the mouth path, and relies on SVG primitives like `circle` and `rect` for rendering.

Jjblaskovich

94% match

Loading thumbnail…

Let's make a face with D3.js!

This example uses D3.js v5 to draw a simple cartoon face as an SVG, comprising a yellow circle head, two eyes, rectangular eyebrows, and an arc-based mouth. The face is centered within a 960×500 viewport using an SVG group transform. The eyebrows animate upward and back down over two seconds each way using chained `transition().duration()` calls. The mouth is generated with D3’s `arc()` geometry, while static shapes are created via `select`, `append`, and attribute setters.

DD2552

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 stylized yellow face drawn with SVG shapes animates its eyebrows and mouth. D3.js v5 constructs the face from circles, rectangles, and an arc-based path, grouping elements with `svg.append` and positioning them via `attr` transforms. The eyebrows move up and down through chained `transition().duration()` calls, while the mouth morphs from a frown to a wide open smile by swapping the `d` attribute computed with `d3.arc()`. All geometry derives from hardcoded constants in the script.

Pprudhvirajmudunuri

94% match