Let's make a face with D33.js!

100%

Let's make a face with D33.js!

✓ Published0🌍 Public

Last edited Aug 4, 2019

Created on Aug 3, 2019

Forked from Let's make a face with D3.js!

A cheerful yellow face is drawn in the center of the screen with black outlines, featuring two eyes, animated eyebrows that move up and down in a two-second cycle, and a smile created using an arc path. The visualization is built with D3 v5, using SVG elements such as circles, rectangles, and a path generated by the `arc()` function. All shapes are appended to a central group, with a smooth eyebrow animation driven by chained `transition().duration()` calls. No external data is loaded; the face is constructed entirely from hardcoded geometric parameters.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Let's make a face witb D3.js!

Built with D3 v5, this animation shows a cheerful yellow face constructed entirely from SVG shapes, including circular eyes, rectangular eyebrows, and a smile drawn using the `arc` function. The face is centered within an SVG canvas, and the eyebrows perform a looping vertical movement through chained `transition().duration()` calls. This example demonstrates fundamental D3 shape generation and animation techniques using selections, attribute manipulation, and the `arc` generator to create the mouth path.

Ssslee8778960

93% match

Loading thumbnail…

Let's make a face with D3.js

A yellow circle with a black outline forms a face, complete with two eyes, animated eyebrows, and an arc-shaped mouth. The eyes and eyebrows are simple SVG circles and rectangles, while the mouth uses a path generated by D3's `arc` function. The eyebrows animate via chained `transition` calls, moving down and back up over two seconds each way. The visualization is built entirely with D3 v5, using its `select` and `arc` modules to render and manipulate SVG elements.

Ffredferramenta

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

93% match

Loading thumbnail…

Let's make a face with D3.js!

This example displays a cheerful face composed of SVG shapes, including a yellow circle, two eyes, eyebrows, and an arc-based mouth. The eyebrows animate by moving downward and returning upward over two sequential 2-second transitions. The visualization is built with D3.js v5, using selections, the `arc` generator for the mouth, and `transition` methods to create the movement. All elements are centered within an SVG canvas sized 960 by 500 pixels.

Lleandermaerkisch

93% match

Loading thumbnail…

Let's make a face with D3.js!

A yellow circular face is built from SVG shapes, with two eyes, animated eyebrows, and a semi-circular mouth, all centered on a blank canvas. The code constructs the face using D3.js version 5 selection and arc methods, positioning elements via translations and attributes. Eyebrows transition between two vertical offsets over two seconds each, creating a repeated raising-and-lowering motion. The visualization demonstrates basic SVG drawing and transition animations without external data.

Ppcbt1125

93% match

Loading thumbnail…

Let's make a face with D3.js

A yellow circle with black outlines forms a smiling face, featuring two black eyes and rectangular eyebrows that animate upward and then return to their original position. The face is constructed with D3.js v5 using SVG elements, including circles for the face and eyes, rectangles for the eyebrows, and a path generated with the d3.arc() API for the mouth. The eyebrows transition via chained transition().duration() calls on a group element, which shifts their vertical offset by 50 pixels over two seconds before resetting.

CClara Hu

93% match

Loading thumbnail…

Let's make a face with D3.js

A cheerful yellow face built with SVG primitives uses D3.js v6 to assemble circles, rectangles, and an arc-based mouth from the `d3.arc` API. The face is centered via an SVG group translation, with eyes and eyebrows positioned using explicit offsets. A `transition().duration(2000)` sequence animates the eyebrow group by shifting its `transform` attribute upward and back, creating a subtle blinking or raising motion. The rendering is entirely SVG-based, with static geometry defined in the initial state.

Xxsg13

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