Skip to main content
SimilarExport ZIP
100%

Lets make a face with d3

✓ Published1🌍 Public
SSchmittYannic
Last edited Aug 7, 2020
Created on Aug 7, 2020
Forked from HTML Starter

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.

AI-generated description

A bare minimum HTML page.

See also React Starter.

MIT Licensed

Similar vizzes

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

make a face in d3

This example shows a simple yellow face built from SVG shapes, with eyebrows that animate up and down in a looping transition. The code uses d3-selection to append a circle for the head, circles for the eyes, rectangles for the eyebrows, and an arc path for the mouth, all positioned relative to a centered group. The eyebrow animation is driven by chained `transition().duration()` calls that move the group’s transform attribute. The visualization renders entirely in SVG within a static 960×500 viewport.

MMartin Casey
94% match
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…

Let's make a face with d3.js

This example constructs a cartoon face from basic SVG shapes using D3.js v7, with a yellow circular head, eyes, eyebrows, and an arc-based mouth. It demonstrates D3’s `select`, `arc`, and `append` methods to build the scene, and uses `transition` with `.duration()` to animate the eyebrows moving up and down in a repeating cycle. The face is centered via an SVG `g` transform, with all elements rendered in a 960×500 viewport.

KKaleb LaBarrie
94% match
Loading thumbnail…

Lets make a face

This example builds a cartoon face from basic SVG shapes—a yellow circle for the head, two black eyes, rectangular eyebrows, and an arc-based mouth. The code uses D3 v5 selections and the `arc()` generator to construct the mouth, while `transition().duration()` animates the eyebrows upward and back down over four seconds. All elements are grouped and centered using SVG transforms, with fixed pixel values controlling feature placement.

AAgitechavids Technologies Private Limited
94% match
Loading thumbnail…

Let's make a face with D3.js!

This example builds a cartoon face out of SVG shapes using D3.js v5, with a yellow circle for the head, two eyes, rectangular eyebrows, and a mouth drawn with the `d3.arc` path generator. The eyebrows animate upward and back down over two seconds via chained `transition()` calls. All elements are centered using an SVG `<g>` group with a translation transform, and the code imports `select` and `arc` from D3 to manipulate the DOM and generate the mouth path. The face is static except for the looping eyebrow movement.

IIan Perry
94% match