Let's make a face with D3.js

100%

Let's make a face with D3.js

✓ Published4🌍 Public

Last edited Jan 26, 2020

Created on Jan 26, 2020

The example shows a simple emoticon-like face constructed from SVG shapes, including a yellow circle, two eyes, two eyebrows, and an arc-shaped mouth. Using D3.js v5, the code leverages the `select` and `arc` APIs to build and position the face elements, and an animation sequence via `transition` moves the eyebrows up and down over two seconds. All parts are drawn as SVG primitives within a 960x500 canvas, centered using a translated group.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Let's make a face with D3.js

This example renders a simple, animated face from basic SVG shapes. A yellow circle forms the head, with two dark circles for eyes and rectangular eyebrows that move up and down. The mouth is drawn as an arc using the D3 `arc` function. The animation is created with D3's `.transition()` and `.duration()` methods, which are used to move the right eyebrow. The entire composition is centered and built within a single `<g>` group using D3's `select` and `append` functions.

Jjcksnm

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

A face built from basic SVG shapes—a yellow circle for the head, circles for eyes, and an arc-generated path for the mouth—is centered on a 960×500 canvas. The code uses D3.js v5’s `select` and `arc` APIs to append and position elements, with `transition()` animating the eyebrows up and down over two-second intervals. The rendering is entirely SVG, with all coordinates computed relative to the svg’s center using its width and height attributes.

BBen Daniel

95% match

Loading thumbnail…

Let's make a face with D3.js!

D3.js constructs a smiling face from SVG shapes, including a yellow circle for the head, two eyes, and an arc-based mouth using the `d3.arc()` generator. The eyebrows, rendered as rectangles, animate vertically through chained `transition().duration()` calls, moving up and down over two seconds each. The code uses D3 selections and attributes to position elements around a centered group, with all coordinates based on the SVG’s 960×500 dimensions.

Ddtdenver

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

95% match

Loading thumbnail…

let's make a face with d3.js

A yellow circle face with black eyes, animated eyebrows, and a curved smile is drawn using D3.js v5. The example builds the face with SVG shapes, including `circle` and `rect` elements, and an `arc` path for the mouth. Eyebrows transition vertically up and down over two seconds using `transition.attr`. The code imports `select` and `arc` from d3, sets an initial SVG size, and groups elements around a centered translation.

BBun

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

95% match

Loading thumbnail…

Let's make a face with D3.js

A yellow circle with black outlines forms a face with two eyes, animated eyebrows, and a smile, all built using D3.js v5 with SVG rendering. The code uses `d3.select`, `d3.arc`, and `selection.transition` to draw the head, eyes, mouth, and to animate the eyebrows up and down over two seconds. The face is centered on a 960×500 SVG canvas, with all shapes positioned via translations and hardcoded numeric offsets for features like eye spacing and eyebrow dimensions.

CCristian Pintor

95% match