Skip to main content
SimilarExport ZIP
100%

Let's make a face with D3.js!

✓ Published0🌍 Public
Mmalmeister
Last edited Jun 8, 2020
Created on Jun 4, 2020

A simple, animated face built with D3.js v5 appears on a blank SVG canvas. The code draws a large yellow circle for the head, adds two eyes and rectangular eyebrows, and constructs a mouth using the `d3.arc()` generator. The eyebrows animate through a two-stage `transition().duration(2000)` sequence, moving down and back up. The example demonstrates basic SVG shape creation, attribute manipulation, and chained transitions, with dimensions calculated from the container's width and height.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Let's make a face with D3.js!

A face made of SVG shapes is drawn and animated with D3.js v5, using a yellow circle for the head, green eyes, and black eyebrows. The code uses `d3.select` and `d3.arc` to construct the mouth, while chained `transition().duration()` calls animate the eyebrows upward and the mouth into a wider smile over two seconds. The static SVG canvas is 960 by 500 pixels, with all elements positioned relative to the center via a translated `<g>` group.

AAnton Koukharski
95% match
Loading thumbnail…

Let's make a face with D3.js!

A face made of SVG shapes is drawn and animated with D3.js v5, using a yellow circle for the head, green eyes, and black eyebrows. The code uses `d3.select` and `d3.arc` to construct the mouth, while chained `transition().duration()` calls animate the eyebrows upward and the mouth into a wider smile over two seconds. The static SVG canvas is 960 by 500 pixels, with all elements positioned relative to the center via a translated `<g>` group.

AAnton Koukharski
95% match
Loading thumbnail…

Let's make a face with D3.js!

This example draws a simple, animated face entirely with D3.js v5 and SVG primitives. A yellow circle forms the head, with black circles for eyes and a path created using `d3.arc` for the mouth. The eyebrows are rectangles that animate up and down using chained `transition` calls, each with a 2000-millisecond duration, demonstrating basic declarative animation. The code uses `d3.select` and `d3.append` to build the SVG structure, and the rendering is fully vector-based.

Hhugomell
95% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow SVG face is drawn with D3.js v5, featuring two eyes, animated eyebrows, and a mouth created using the `d3.arc` generator. The face is centered within an SVG canvas, with facial features positioned via translation transforms. Eyebrows animate upward and downward using chained `transition` calls with a 1500-millisecond duration, while the mouth is rendered as an arc path between specified angles. The example demonstrates fundamental SVG shape creation and coordinate manipulation in D3.

Ddtdenver
94% match
Loading thumbnail…

Let's make a face with D3.js!

A face built from SVG primitives is drawn on a 960 by 500 canvas, with yellow circle head, black-outlined eyes, eyebrows, and a smile-shaped arc. The animation sequentially shifts the entire eyebrow group downward and then back upward over two seconds each using chained D3 transitions. The example demonstrates basic DOM manipulation via `d3.select` and `append`, constructing shapes with attributes, and moving elements with `transition().duration().attr()`, where the mouth is generated with the `d3.arc` generator.

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

Let's make a face with D3.js!

This example builds a simple yellow face using D3.js v5 and SVG shapes, with a large circle for the head, two smaller circles for eyes, rectangular eyebrows, and an arc-generated mouth. The eyebrows animate by translating up and down using chained `transition().duration()` calls on a group element. The code uses D3’s `select`, `arc`, and attribute-setting methods to construct the static elements, while the animation relies on D3’s transition system applied to SVG transforms. The data is hardcoded as constants for spacing, offsets, and radii, and the scene is centered within a 960×500 SVG canvas.

Kkh-tm
94% match