Skip to main content
SimilarExport ZIP
100%

Let's make a face with D3.js!

✓ Published1🌍 Public
Xxfqx92
Last edited Dec 1, 2019
Created on Dec 1, 2019

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.

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 an animated face entirely from SVG primitives. It draws a yellow circle for the head, adds two black eyes and rectangular eyebrows, then creates a mouth using an `arc()` path generator. The eyebrows are animated with a two-second `transition()` that shifts them up and down before returning to their original position. The code relies on D3's `select`, `append`, and attribute methods to build and manipulate the SVG scene.

AArnaud Gbaguidi
97% match
Loading thumbnail…

Let's make a face with D3.js!

This example demonstrates how D3.js can construct a simple animated face using fundamental SVG elements. A yellow circle forms the head, with two circles for eyes and a path drawn using the `arc` generator for the mouth. The code uses `d3.select` and `d3.append` for DOM manipulation, while the `transition` method animates the eyebrows upward and back over two seconds each way. The face is centered via a group transform, and all shapes are rendered as SVG with hardcoded attributes.

MMargarita Chernetski
96% match
Loading thumbnail…

Let's make a face with D3.js

This example demonstrates a simple animated face built entirely with D3.js primitives. It shows a yellow circle head with two eyes, eyebrows, and an arc-shaped mouth, all composed of SVG shapes including circles, rectangles, and a path. A continuous two-second transition repeatedly moves the eyebrows up and down, creating a subtle animation. The code uses D3's `select` to target the SVG root, `append` to build the geometric elements, and the `arc()` generator to construct the mouth’s path, with all rendering in SVG.

Ppoyomon
96% match
Loading thumbnail…

Let's make a face with D3.js!

An animated SVG face draws attention with a yellow circular head, dark outline, and two eyes. Using D3.js v5, the code constructs the face from basic shapes—circles for the head and eyes, rectangles for eyebrows, and an arc path for the mouth—all contained within a group. The animation sequences alternate eyebrow raises and eye blinks over a few seconds. The example demonstrates D3's selection and arc APIs, along with chained transition methods to create a playful, looping facial expression.

DDevWorksSimone
95% match
Loading thumbnail…

Let's make a face with D3.js!

This example uses D3.js v5 to construct a cartoon face from basic SVG shapes, including a yellow circle for the head, black circles for eyes, and an arc-based path for the mouth. The animation shows the eyebrows moving up and down repeatedly through chained `transition()` calls, each lasting 2000 milliseconds. The code uses D3's `select` and `arc` APIs, with coordinates centered via an SVG group transformation. The face is built programmatically in JavaScript, positioning shapes relative to the center of a 960 by 500 viewport.

Mmuxiaofan
95% 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
95% match
Loading thumbnail…

Let's make a face with D3.js!

This example uses D3.js v5 to build a smiling face from basic SVG shapes, including a yellow circle for the head, black circles for the eyes, rectangles for the eyebrows, and an arc for the mouth. The code demonstrates fundamental DOM manipulation by selecting the SVG element, appending groups, and positioning shapes with the `attr` method. Eyebrows animate by using chained `transition().duration(2000)` calls to move their group vertically, first upward and then back to the original position. The example highlights D3’s `select` and `arc` APIs for creating and transforming visual elements.

QQiushi
95% match
Loading thumbnail…

Let's make a face with D3.js!

This example builds a yellow cartoon face from basic SVG shapes, including circles for eyes and a mouth, rectangles for eyebrows, and an arc for the smile. The face is centered within a red background, and the eyebrows animate upward and then back down using chained `transition.duration` calls. The code uses D3 v5’s `select`, `arc`, and transition methods to construct and animate the SVG.

AAbhijit Roy
95% match