Skip to main content
SimilarExport ZIP
100%

Let's make a face with D3.js

✓ Published2🌍 Public
MMike Wolfgram
Last edited Sep 9, 2019
Created on Sep 9, 2019

This example uses D3.js to construct a simple animated face from SVG shapes. It shows a yellow circle as the head, two eyes, and eyebrows that move up and down via chained `.transition()` calls over two seconds each, plus a mouth drawn as an arc. The code relies on D3's selection API (`d3.select`) and the `d3.arc` generator to define the mouth's path, with all elements grouped and translated to center the face.

AI-generated description

An example including some commonly used features of SVG.

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

Let's make a face with D3.js!

A face made of SVG shapes uses D3.js to demonstrate fundamental DOM manipulation and chained transitions. A yellow circle, two eyes, and an arc-based mouth are drawn, while the eyebrows, rendered as rectangles, animate upward and then return to their original position via two sequential `transition().duration(2000)` calls. The code imports `select` and `arc` from D3 v5, builds the face within a centered `<g>` group, and relies on plain SVG attributes for positioning and styling.

HHonza Cahlík
95% 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
95% match
Loading thumbnail…

Let's make a face with D3.js

This example demonstrates how to build an animated face using D3.js, starting with a yellow circle for the head and adding eyes, eyebrows, and a mouth via SVG shapes like circles, rectangles, and a path. The code uses `d3.select`, `d3.arc`, and chained `transition` calls to animate the eyebrows moving up and down over time. All elements are positioned relative to a centered group, and the face responds to the viewBox size defined in the HTML.

Rrychenf1
94% match
Loading thumbnail…

Let's make a face with d3.js

A yellow circle with black outline forms a face via SVG. Two black eyes and rectangular eyebrows animate upward and downward in a repeating transition, while an arc-shaped mouth uses d3.arc. The code builds the face with d3.select, appends SVG shapes, and applies chained transition().duration() calls to move the eyebrow group. All elements are positioned via SVG attributes within a centered group.

JJustinS1209
94% 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
94% match