Funny Face with d3

100%

Funny Face with d3

✓ Published2🌍 Public

Last edited Jul 11, 2020

Created on Jul 10, 2020

A yellow circle with a black outline serves as a face, featuring two eyes, animated eyebrows, and a mouth drawn as a path. The eyebrows move up and down repeatedly using chained `transition()` calls with a 2000-millisecond duration. The example uses D3 v5's `select`, `arc`, and `transition` APIs, rendering everything as SVG elements within a fixed 960×500 viewport. The `arc` generator creates the mouth shape with specified inner and outer radii and angular extents.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Face With D3

A yellow circle with black outlines forms a face, featuring two eyes, animated eyebrows, and a mouth drawn as an arc. The code uses d3-selection to append SVG shapes and d3-transition with chained 2000-millisecond transitions to move the eyebrows downward and back. The d3.arc() API generates the mouth path, while attribute manipulation handles positioning and styling.

Iikimes

89% match

Loading thumbnail…

D3 Face

A yellow circle with black outlines forms a face, featuring two eyes, rectangular eyebrows, and a half-circle mouth. The eyebrows animate by moving upward over two seconds and then returning to their original position. The visualization is built with D3 v7, using SVG shapes within a root group, and the mouth is drawn with the `d3.arc` path generator. The animation relies on chained `transition().duration()` calls, offering a simple, playful demonstration of D3's selection and transition methods.

Hhenryspradlin

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

89% match

Loading thumbnail…

Let's Make a Face

A yellow circle face with black eyes and animated eyebrows is drawn using SVG. The eyebrows move up and down through chained transitions that alternate their vertical offset. D3 v6's `select`, `arc`, and `transition` APIs construct the face, with the mouth rendered as an arc path and eye positions set via fixed coordinates.

BbeauMarko

88% match

Loading thumbnail…

Let's Make a Face with D3.js

A yellow SVG face with a black outline appears, featuring two circular eyes and a smile rendered as an arc path, while its rectangular eyebrows move down and back up in a looping animation. Built with D3 v5, the code uses `select`, `arc`, and chained `transition().duration()` calls on SVG groups to animate the eyebrow transforms, with the face centered via a translated `<g>` element and dimensions read from the SVG attributes.

DDan Henri

88% match

Loading thumbnail…

Lets make a face with D3.js!

A yellow circle with black outlines forms a face, complete with two eyes, animated eyebrows that move up and down, and a curved smile drawn using D3's `arc` generator. The SVG elements are positioned relative to a centered group, with the eyebrows animating through chained `transition` calls that alter the group's transform over two-second intervals. This example uses D3 v5's `select` and `arc` functions to build and animate the face entirely in the browser.

AAdeola Oni

88% match

Loading thumbnail…

Let's make a face!

A yellow circular face with gray outlines animates its facial features using D3 transitions. Two circular eyes remain fixed, while rectangular eyebrows and the mouth’s arc path shift vertically and change radius over timed intervals. Built with d3.js v5, the example uses `select`, `arc`, and chained `transition().duration()` calls to cycle eyebrow positions and mouth size on an SVG canvas.

JJamie919

88% match

Loading thumbnail…

Let's make a face with d3.js!

A yellow circle with black outlines forms a face, featuring two eyes, animated eyebrows that move up and down, and a mouth drawn as an arc. Built with D3 v5, the example uses SVG elements like `circle`, `rect`, and `path`, with the mouth created via the `d3.arc` generator. The eyebrows transition vertically using `transition.duration`, while the face is centered using an SVG `g` transform.

Ccheeson

88% match