Face made with d3.js

100%

Face made with d3.js

✓ Published1🌍 Public

Last edited Feb 16, 2023

Created on Oct 20, 2021

A face built from SVG primitives animates through a series of facial expressions. The circular face, positioned via an SVG group transform, holds two eyes that pulse by scaling their radius. Eyebrows shift vertically and rotate, while the mouth, drawn with the `d3.arc` path generator, expands and contracts its inner and outer radii. The `d3.selection.transition` API orchestrates these 2000-millisecond animations, creating a looping, humorous sequence. The example uses d3.v7 to manipulate and transition the SVG elements directly.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Face with D3.js!

A smiling face drawn with SVG shapes animates its eyebrows and mouth in a looping transition. The code builds the face using D3.js v5 selection and append methods to create circles, rectangles, lines, and an arc-based path, all positioned with hardcoded coordinates. The eyebrows shift upward and the mouth changes thickness through chained `transition().duration(3000)` calls, demonstrating basic DOM manipulation and attribute updating without data binding.

Nnikeshkv

90% match

Loading thumbnail…

Let's Make a Face with D3.js

This example animates a simple cartoon face built entirely with SVG shapes in D3.js. Shown head-on, the face consists of a circular head, two eyes, rectangular eyebrows, and an arc-based mouth, all centered within an SVG canvas. The eyebrows repeatedly bounce upward and downward using chained `transition` calls with a two-second duration each. The code leverages D3 v5’s `select`, `arc`, and `transition` APIs, constructing the face by appending circles, rectangles, and paths to a translated group element.

Tthespiraltree

90% match

Loading thumbnail…

Face with D3.js!

A cheerful, animated face rendered entirely with D3.js SVG shapes. The code draws a yellow circular head, two red eyes, blue rectangular eyebrows, and a purple arc-shaped mouth, all positioned within a responsive coordinate system. The eyebrows use the `transition` API to animate horizontally back and forth over six seconds. The face is built by composing basic SVG primitives—`circle`, `rect`, and `path` elements—using D3's `select` and `attr` methods, while the mouth is generated with the `arc` generator.

Ssslee8778960

90% match

Loading thumbnail…

face by thecodemaster

A stylized face rendered in SVG animates its eyebrows in a looping motion. Built with D3 v7, the visualization constructs a green circular head, two eyes, and a mouth using basic shape primitives and an arc generator. The `d3.arc()` function defines the mouth’s curved path, while chained `transition().duration()` calls move the eyebrow rectangles up and down. The code uses `select()` to manipulate the SVG canvas and applies attributes like `cx`, `r`, and `transform` to position elements. The animation runs automatically on page load, with no external data source.

NNwaegerue Chinemerem

89% match

Loading thumbnail…

Face with D3.js!

A cheerful cartoon face rendered in SVG appears on screen, built entirely with D3.js v5. The code uses `d3.select` and `d3.arc` to construct a yellow circle head, red eyes, blue rectangular eyebrows, and a purple arc-based mouth. The eyebrows animate via chained `transition()` calls, sliding inward and outward over three-second intervals. The example demonstrates composition of SVG primitives and basic animation without external data.

Ssslee8778960

89% match

Loading thumbnail…

A Face with D3.js!

A smiley face drawn with D3.js features animated eyebrows that move up and down. The example demonstrates fundamental DOM manipulation by building the face from SVG primitives: circles for eyes, a rectangle for the nose, a path from `d3.arc` for the mouth, and rectangles for eyebrows. The animation uses chained `transition().duration(2000)` calls to shift the entire eyebrow group's `transform`, showing how D3 manipulates SVG attributes over time. The SVG canvas is set to 960×500 with an orange background.

YYoung Song

89% match

Loading thumbnail…

Face

A smiling face drawn with SVG shapes animates its eyes and eyebrows. The yellow circle head contains two black eye circles and rectangular brows that rise and fall via chained transitions, while a mouth arc uses the `d3.arc` helper. The code selects the SVG element, centers a group, and applies `transition.attr` with specified durations to move facial features vertically, demonstrating coordinate transforms and timed animations with D3 v5.

MManoharURK20AI1057

89% match

Loading thumbnail…

Let's make a FACE with D3.js

An SVG face built from D3.js primitives—circles for the head and eyes, rectangles for brows, and an arc path for the mouth—appears on a teal background. The face is centered using SVG group transforms, with features positioned via computed coordinates. D3 transitions animate the eyes and mouth, moving them in a sequence of translate transformations over three-second durations. The styling comes from an external CSS file, while the D3 library (v5) handles both shape creation and the tweening of the SVG attributes.

TTMorgan99

89% match