Let's make a face with D3.js!

100%

Let's make a face with D3.js!

✓ Published1🌍 Public

Xxychen0612.cs09@nycu.edu.tw

Last edited Sep 19, 2023

Created on Sep 19, 2023

Forked from Untitled

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.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Let's make a face with D3.js!

This example uses D3.js v5 to construct a simple animated face. The SVG rendering starts with a yellow circular face, then adds eyes, eyebrows, and a mouth using an arc path. The eyebrows move up and down through chained transitions, creating a subtle animated expression. The code demonstrates the use of `select`, `append`, `attr`, and `arc` APIs within an SVG container, showing how basic geometric shapes can be assembled into a recognizable character.

Xxfqx92

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

95% match

Loading thumbnail…

Let's make a face with D3.js!

A yellow SVG face appears on a blank canvas, with its two rectangular eyebrows animating upward and then back down in a repeating loop. The facial features—head, eyes, and mouth—are constructed by appending basic shapes to a central group, with the mouth drawn as a semi-circular arc using D3’s `arc` generator. The animation is driven by chaining `transition().duration(2000)` calls on the eyebrow group, demonstrating fundamental DOM manipulation and a simple timeline with D3 v5.

Xxiaoma1002

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

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

95% match

Loading thumbnail…

Let's make a face with D3.js!

A yellow SVG face is drawn with D3.js v5, featuring two eyes, animated eyebrows, and a mouth created using the `d3.arc` generator. The face is centered within an SVG canvas, with facial features positioned via translation transforms. Eyebrows animate upward and downward using chained `transition` calls with a 1500-millisecond duration, while the mouth is rendered as an arc path between specified angles. The example demonstrates fundamental SVG shape creation and coordinate manipulation in D3.

Ddtdenver

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

95% match

Loading thumbnail…

Let's make a face with D3.js!

This example uses D3.js v5 to construct a smiling face from SVG primitives, with animated eyebrows that move up and down over time. The face consists of a yellow circle, two eyes, eyebrows, and a mouth drawn using an arc path. The animation is handled through chained `transition().duration(2000)` calls that alternately shift the eyebrow group’s `transform` attribute, creating a simple looping motion. The code relies on methods like `select`, `append`, and `attr` for DOM manipulation, along with D3’s `arc` generator for the mouth shape.

Vveagy

95% match