Make a face with D3.js

100%

Make a face with D3.js

✓ Published2🌍 Public

Last edited Jan 29, 2021

Created on Jan 29, 2021

This example assembles a cartoon face from basic SVG shapes, depicting a yellow head with eyes, eyebrows, and a mouth. The eyebrows animate in a looping motion, moving down and back up. Built with D3.js v6, the code uses `select`, `append`, and `attr` to construct the visual elements, while the `transition().duration()` API drives the continuous eyebrow animation. The mouth is drawn using the `arc()` generator to create a curved path.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Make a face w/ D3.js

This example uses D3.js to draw a cartoon face from SVG primitives, including a yellow circular head, eyes, eyebrows, and an arc-based mouth. The brows are animated using D3's transition system, moving downward over 2.5 seconds and then returning. The code constructs the shape by translating a central group, positioning features with relative offsets, and applies rotations to the rectangular eyebrows. The mouth is generated with D3's arc generator, which defines a path using inner and outer radii and angular ranges. Rendering is purely in SVG, with no external data, relying on hardcoded geometry.

Ppeterjchan

93% match

Loading thumbnail…

Let's make a face with D3.js!

This example builds a cartoon face using D3.js v5, rendered as SVG elements with animated eyebrows. It draws a yellow circle for the head, two blue eyes, and a mouth created with the `d3.arc()` path generator. The eyebrows, made of rectangles, move up and down through chained `transition().duration()` calls over two seconds each. The code uses `d3.select` to attach elements to an SVG container and positions them via transform attributes, demonstrating basic geometric shape composition and simple animation in D3.

YYuqin

93% match

Loading thumbnail…

Let's make a face with D3.js!

This example displays a yellow, cartoon-like face drawn with SVG primitives, including eyes, eyebrows, and a mouth. The face’s eyebrows perform a continuous up-and-down animation using D3’s `transition` API, creating a simple, expressive motion. The code uses D3 v7’s `select`, `append`, and `arc` functions to construct the shapes, with a 960×500 SVG canvas. The mouth is generated via the `arc()` path geometry, while the eyebrows shift vertically over two-second intervals, showcasing basic SVG rendering and animation in D3.

Xxychen0612.cs09@nycu.edu.tw

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

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

93% match

Loading thumbnail…

Let's make a face with D3.js!

Using D3.js v5, this example builds a simple cartoon face from SVG shapes: a yellow circle head, two dark eyes, rectangular eyebrows, and an arc-based smile. The code employs D3 selections to append elements and `d3.arc` to generate the mouth path. Animated eyebrows move via chained `transition().duration()` calls, shifting vertically and returning, creating a blinking-like effect. The rendering uses SVG with a centered group transform, and all visual components are defined programmatically with fixed numeric constants for spacing and size.

Nnkohdatavis

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

93% match

Loading thumbnail…

Let's make a face with D3.js

This example demonstrates how to build a cartoon face using D3.js v6, composed of basic SVG shapes: a yellow circle for the head, two small circles for eyes, rectangles for eyebrows, and an arc-based path for the mouth. The page centers the face within an SVG, and a transition animates the right eyebrow moving upward over two seconds. The code imports `select` and `arc` from the D3 library, uses `svg.append` to construct elements, and applies a transition with a 2000-millisecond duration. No external data is involved; it is purely a programmatic SVG rendering exercise.

++/+

93% match