Skip to main content
SimilarExport ZIP
100%

Let's make a face with D3.js

✓ Published0🌍 Public
Ppoyomon
Last edited Sep 19, 2018
Created on Sep 19, 2018

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.

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

Let's make a face with D3.js!

This example demonstrates the creation of a simple, animated face using D3.js, showing how to build and manipulate SVG shapes. The code renders a yellow circle for the face, with eyes, eyebrows, and a mouth composed of SVG primitives. The eyebrows are animated using chained `transition` calls, moving them up and down over a 2000-millisecond duration. The example relies on D3's selection and DOM manipulation methods, such as `select` and `append`, to construct the scene and animate the elements.

Sshiy7
95% match
Loading thumbnail…

Let's make a face with D3.js

A yellow face built from SVG shapes animates its eyebrows up and down in a looping sequence. Using D3.js v5, the example selects an SVG element and constructs the face with circles for the eyes and an arc-generated path for the mouth, all positioned dynamically based on the SVG’s dimensions. The eyebrows, rendered as rectangles, use D3’s `transition().duration()` method twice to create the repeated motion. The code imports `select` and `arc` from the D3 module, demonstrating core SVG manipulation and animation within a single static data-less visualization.

AAveryBurke
95% match
Loading thumbnail…

Let's make a face with D3.js

This example demonstrates how to build a cartoon face using D3.js v6, composed of basic SVG shapes: a yellow circle for the head, two small circles for eyes, rectangles for eyebrows, and an arc-based path for the mouth. The page centers the face within an SVG, and a transition animates the right eyebrow moving upward over two seconds. The code imports `select` and `arc` from the D3 library, uses `svg.append` to construct elements, and applies a transition with a 2000-millisecond duration. No external data is involved; it is purely a programmatic SVG rendering exercise.

++/+
95% match