Skip to main content
SimilarExport ZIP
100%

Let's make a face with D3.js!

✓ Published4🌍 Public
Fforcox43
Last edited Jun 8, 2020
Created on May 30, 2020
Forked from HTML Starter

This example draws a smiling yellow face out of SVG shapes using D3.js v5. It constructs a circle for the head, two circles for eyes, rectangles for eyebrows, and an arc path for the mouth, all centered on an SVG canvas. The eyebrows animate upward and back down over four seconds using chained `transition` calls with a two-second duration each. The code relies on D3’s `select` and `arc` functions to build the scene entirely from static attributes, with no external data source.

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

Let's make a face with D3.js!

This example builds a smiling face in SVG using D3.js v5, with a yellow circle for the head, two eyes, and an arc-shaped mouth drawn via `d3.arc()`. The eyebrows are rectangles that animate up and down repeatedly using chained `transition().duration()` calls, creating a winking or surprised effect. The entire face is centered by translating a group element to the middle of an 800×400 SVG canvas, with dimensions read from the SVG attributes and hard-coded offsets for facial features.

Mmwhiten
96% match
Loading thumbnail…

Lets make a face

A smiling face is drawn with D3.js in an SVG, featuring a yellow circle head, two eyes, and a mouth arc. The code uses basic SVG shapes like `circle` and `rect`, and the `d3.arc()` function to generate the mouth path. The eyebrows are animated with chained `transition()` calls, moving up and down over 500ms intervals. This example is built with React and D3 v5, with the face centered and scaled based on the SVG’s dimensions.

Llukastieber
96% match
Loading thumbnail…

Let's make a face with D3.js

A smiling face is drawn as a yellow circle with two eyes, animated eyebrows, and an arc-shaped mouth, all rendered in SVG. The animation uses D3 transitions to move the eyebrows up and down over two seconds. The code leverages `d3.select`, `d3.arc`, and SVG `circle`, `rect`, and `path` elements within a fixed 960×500 viewport, with the face centered via a group transform.

NNkwachi Abel
96% match
Loading thumbnail…

Let's make a face with D3.js!

This example uses D3.js v5 to build a smiling face from basic SVG shapes, including a yellow circle head, two eyes, animated eyebrows, and an arc-based mouth. The code constructs the face with `d3.select`, `append`, and `d3.arc` for the mouth path, while the eyebrows animate up and down using `transition().duration()`. All elements are centered within an SVG canvas using a translated group, and the rendering relies entirely on SVG attributes rather than external data.

VVito
96% match
Loading thumbnail…

Let's make a face with D3.js!

This example builds a smiling face out of basic SVG shapes using D3.js v5. The face consists of a yellow circle for the head, two circles for eyes, two rectangles for eyebrows, and an arc-generated path for the mouth, all centered within an SVG canvas. The eyebrows animate upward and then back down via chained `transition()` calls. The code imports `select` and `arc` from d3, demonstrating how to construct and position shapes with SVG attributes.

AAznaggar
96% match
Loading thumbnail…

Let's make a face with D3.js!

This example shows a cheerful yellow face built from SVG shapes that animates its eyebrows up and down. The code uses D3.js version 5 to select the SVG element, append circles for the eyes and face, and draw the mouth with the `arc` generator. Eyebrow rectangles are animated using chained `transition().duration()` calls, moving vertically over two seconds. The static geometry derives from numeric constants for spacing and sizing, with the face centered via a transformed group.

Ssalwa191
96% match
Loading thumbnail…

Let's make a face with D3.js

A smiling face built from SVG shapes animates in D3.js v5. A yellow circle forms the head, with eyes, animated eyebrows that move up and down via chained `transition` calls, and a mouth drawn as an arc path using `d3.arc()`. The code positions elements within a group translated to the canvas center, using fixed pixel dimensions for features.

Ppkcesar
96% match