Skip to main content
SimilarExport ZIP
100%

Let's make a face with D3.js!

✓ Published3🌍 Public
Ddacoylo
Last edited Jun 29, 2020
Created on Jun 29, 2020
Forked from Create Bar Chart

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.

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 displays a simple yellow face composed of SVG shapes, including eyes, eyebrows, and a mouth, all built programmatically with D3.js. The face is centered within a fixed viewport using a group transformation. The code uses D3’s `select` to target the SVG element and `append` to construct each shape, while the `arc` function generates the mouth’s path. An animated eyebrow movement is achieved by chaining multiple `transition().duration()` calls, which sequentially shift the eyebrow group’s vertical position.

Ccledevoute
96% match
Loading thumbnail…

Let's make a face with D3.js!

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.

Fforcox43
96% match
Loading thumbnail…

Let's make a face with D3.js!

This example displays a yellow, cartoon-style face built with SVG shapes, including two eyes, rectangular eyebrows, and a smiling mouth. The eyebrows continuously move upward and downward through a two-stage chained animation cycle. The face is constructed in D3 v5 using `d3.select` and `d3.arc`, with shape attributes set directly. A React starter is available, but the primary implementation uses plain D3 with SVG transitions to animate the eyebrow group’s translate transform.

CCyc-Evelyn
96% match
Loading thumbnail…

Let's make a face with D3.js!

This interactive example uses D3.js v5 to draw a cartoon face from basic SVG shapes, including a yellow circle, two eyes, eyebrows, and a mouth constructed with an arc path. The code builds the face by appending circle, rect, and path elements inside SVG groups, then animates the eyebrows through a sequence of `transition().duration(2000)` calls that shift their position horizontally and vertically. The rendering relies on D3’s `select`, `append`, and `arc` APIs, with all elements centered via a group transform. The animation cycles through multiple eyebrow movements, demonostrating how D3 transitions can orchestrate timed attribute changes.

Ccathykan
96% 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
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!

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
96% 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
96% match