Skip to main content
SimilarExport ZIP
100%

Let's make a face witb D3.js!

✓ Published1🌍 Public
Ssslee8778960
Last edited Feb 2, 2020
Created on Feb 2, 2020

Built with D3 v5, this animation shows a cheerful yellow face constructed entirely from SVG shapes, including circular eyes, rectangular eyebrows, and a smile drawn using the `arc` function. The face is centered within an SVG canvas, and the eyebrows perform a looping vertical movement through chained `transition().duration()` calls. This example demonstrates fundamental D3 shape generation and animation techniques using selections, attribute manipulation, and the `arc` generator to create the mouth path.

AI-generated description
MIT Licensed

Similar vizzes

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

Let's make a face with D3.js!

A yellow circle with two black eyes, animated eyebrows, and an arc-shaped mouth forms a smiling face. The example demonstrates basic D3.js v5 shape generation and SVG manipulation, using `d3.select` to append circles, rectangles, and a path built with `d3.arc`. The eyebrows move up and down via chained `transition().duration()` calls, creating a subtle animated expression. All elements are centered within an SVG of fixed dimensions using a translated group.

DDifan Gu
95% match
Loading thumbnail…

Let's make a face with D3.js!

Built with D3.js v5, this animated SVG draws a yellow smiley face with circular eyes, a curved mouth, and rectangular eyebrows. The eyebrows continuously move up and down using chained `transition()` calls with `attr` updates, demonstrating fundamental DOM manipulation through selections like `select` and `append`. The code constructs the face using SVG primitives—circles, rects, and a path generated by the `arc()` generator—within a group translated to the canvas center. The example showcases D3 transitions and shape generation without requiring any external data.

AArthur Welf
95% match
Loading thumbnail…

Let's make a face with D3.js!

This example shows a friendly yellow face built entirely with SVG shapes, whose eyebrows animate upward and then back down in a looping motion. The face is constructed using D3.js v5 selections to append a circle for the head, additional circles for the eyes, rectangles for the eyebrows, and a path generated with the `d3.arc()` function for the mouth. The code uses `transition()` with a 2000-millisecond duration to animate the eyebrow group’s `transform` attribute. All elements are centered within an SVG canvas using a translation transform, and the styling is handled by an external stylesheet.

Ddacoylo
95% match
Loading thumbnail…

Let's make a face with D3.js!

A smiling face made of yellow SVG shapes animates its eyebrows upward and downward in a loop. Built with D3 v5, the example uses basic selections to append and style a circle, two eye circles, rectangular eyebrows, and an arc-shaped mouth. The `arc` generator creates the mouth path, while chained `transition().duration()` calls animate the eyebrow group’s translate transform over two seconds each way. The SVG is centered via a translated group based on the viewport dimensions.

Bbluesibra
95% match
Loading thumbnail…

Let's Make a face with D3.js

A cheerful yellow SVG face is drawn using D3.js v5, with a circular head, eyes, eyebrows, and an arc-based mouth. The eyebrows animate vertically via `transition().duration(2000)`, moving down and up in a repeating sequence. The code uses D3’s `select` and `arc` helpers to construct shapes, with coordinates set relative to the SVG’s center. All elements are rendered as SVG primitives, and the animation demonstrates chained transitions on grouped elements.

Kkiyahw1
95% match