Skip to main content
SimilarExport ZIP
100%

make a face with d3.js

✓ Published1🌍 Public
ZZhipeng Xu
Last edited Jun 15, 2020
Created on Jun 15, 2020
Forked from SVG

Using d3.js v5 and SVG, this example renders a cartoon face from primitive shapes: a yellow circle head, two eyes, eyebrows, and a mouth arc. The face is centered and symmetrically positioned using coordinate transforms. The eyebrows animate vertically through chained `transition` calls with a 2000ms duration, moving up by 50 pixels and then returning to their original position. The code constructs the SVG programmatically via `select` and `append`, and uses the `arc` function to generate the mouth's path data from inner and outer radii and angular ranges.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Let's make a face with D3.js!

This example uses D3.js v5 to draw a simple cartoon face as an SVG, comprising a yellow circle head, two eyes, rectangular eyebrows, and an arc-based mouth. The face is centered within a 960×500 viewport using an SVG group transform. The eyebrows animate upward and back down over two seconds each way using chained `transition().duration()` calls. The mouth is generated with D3’s `arc()` geometry, while static shapes are created via `select`, `append`, and attribute setters.

DD2552
94% match
Loading thumbnail…

Lets make a face with d3

This example shows a simple cartoon face built with SVG shapes—a yellow circle for the head, two eyes, and an arc-based mouth—that animates its eyebrows up and down over time. The face is centered using a translated group, and each facial feature is positioned relative to that center. The code uses D3 v5 selection methods like `select` and `append`, along with `transition().duration()` to animate the eyebrow group’s `transform` attribute. The mouth is drawn using the `d3.arc()` generator with specified inner and outer radii and angular ranges.

SSchmittYannic
94% 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.

++/+
94% match
Loading thumbnail…

Make a face w/ D3.js

This example uses D3.js to draw a cartoon face from SVG primitives, including a yellow circular head, eyes, eyebrows, and an arc-based mouth. The brows are animated using D3's transition system, moving downward over 2.5 seconds and then returning. The code constructs the shape by translating a central group, positioning features with relative offsets, and applies rotations to the rectangular eyebrows. The mouth is generated with D3's arc generator, which defines a path using inner and outer radii and angular ranges. Rendering is purely in SVG, with no external data, relying on hardcoded geometry.

Ppeterjchan
93% match
Loading thumbnail…

Let's make a face with D3.js!

This example builds a cartoon face from basic SVG shapes—a yellow circle, two eyes, rectangular eyebrows, and an arc-based mouth—all positioned relative to the center of the viewport. The code uses D3.js v5's `select` and `arc` APIs to construct the geometry, and SVG `transition().duration()` to animate the eyebrows downward by 50 pixels and back over two seconds. The rendering approach is fully declarative, with the face components grouped and transformed together, and all coordinates computed from the SVG element's width and height attributes.

Iidwann-eng
93% match
Loading thumbnail…

Let's make a face with D3.js!

This example builds a cartoon face from basic SVG shapes—a yellow circle, two eyes, rectangular eyebrows, and an arc-based mouth—all positioned relative to the center of the viewport. The code uses D3.js v5's `select` and `arc` APIs to construct the geometry, and SVG `transition().duration()` to animate the eyebrows downward by 50 pixels and back over two seconds. The rendering approach is fully declarative, with the face components grouped and transformed together, and all coordinates computed from the SVG element's width and height attributes.

Iidwann-eng
93% match
Loading thumbnail…

Let's make a face with D3.js!

Using D3.js v5, this example builds a simple cartoon face from SVG shapes: a yellow circle head, two dark eyes, rectangular eyebrows, and an arc-based smile. The code employs D3 selections to append elements and `d3.arc` to generate the mouth path. Animated eyebrows move via chained `transition().duration()` calls, shifting vertically and returning, creating a blinking-like effect. The rendering uses SVG with a centered group transform, and all visual components are defined programmatically with fixed numeric constants for spacing and size.

Nnkohdatavis
93% match
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
93% match