Skip to main content
SimilarExport ZIP
100%

Make a face with D3.JS

✓ Published1🌍 Public
TTimothy sit
Last edited Dec 26, 2020
Created on Dec 26, 2020

A face drawn with D3.js v6 animates its eyebrows up and down. The SVG face shows a yellow circular head, two eyes, rectangular eyebrows, and a curved mouth created with the `d3.arc` generator. The view is centered using an SVG group translation based on the width and height attributes. Eyebrow movement uses chained `transition` calls to shift the group's transform over 2000 milliseconds each way.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Make a face with the use of D3.js

A yellow SVG face with black-outlined features animates its eyebrows and mouth. D3.js v6 shapes the face using `arc()` for the smile and appended `circle` and `rect` elements for the eyes and brows. Chained `transition()` calls with a two-second duration repeatedly move the eyebrows upward and adjust the mouth’s inner and outer radii, creating a looping expression. The face is centered and scaled using the SVG’s dimensions in a React-based starter.

Ssimon0863
93% match
Loading thumbnail…

Let's make a face with D3.js

A yellow circle face with black eyes and expressive eyebrows is drawn using D3.js v5 in an SVG. The code uses `select` to access the pre-defined SVG element, `arc` to generate the mouth path, and chained `transition().duration()` calls to animate the right eyebrow bouncing upward and downward. The face is centered using a translated `g` group, with hardcoded numeric values for spacing, radii, and offsets defining all facial features.

AAtarius Armstrong
93% 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
92% match
Loading thumbnail…

Make a Face with D3.jh

A yellow circle becomes a face with animated eyebrows, eyes, and a mouth rendered in SVG. The example uses D3 v5 selections and transitions to build the facial features, with `transition().duration()` moving the eyebrows up and down in a repeating loop. The mouth is drawn using the `d3.arc()` path generator, while the face's structure relies on nested groups and coordinate offsets. The code imports `select` and `arc` from D3 and runs inside a React framework setup with bundled JavaScript.

MMichelle Mac
92% match
Loading thumbnail…

Make a Face with D3.jh

A yellow circle becomes a face with animated eyebrows, eyes, and a mouth rendered in SVG. The example uses D3 v5 selections and transitions to build the facial features, with `transition().duration()` moving the eyebrows up and down in a repeating loop. The mouth is drawn using the `d3.arc()` path generator, while the face's structure relies on nested groups and coordinate offsets. The code imports `select` and `arc` from D3 and runs inside a React framework setup with bundled JavaScript.

MMichelle Mac
92% match
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
92% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow SVG face with black-outlined features animates its eyebrows in a repeating up-and-down motion. Built with D3 v5, the example composes circles, rectangles, and an arc-generated path for the mouth on a centered group. D3 transitions with specified durations and movement offsets drive the eyebrow animation, while static attributes define eye spacing, radius, and facial proportions.

Eemanuelemurgolo
92% match
Loading thumbnail…

Make a face with D3.js

A yellow face built from SVG primitives sits centered in the canvas, with two circles for eyes, two rectangles as eyebrows, and a path-based mouth using `D3.arc`. The eyebrows animate upward and then back down over two seconds using D3’s `.transition().duration()` API, creating a subtle, repeated motion. The code imports `select` and `arc` from D3 v6 within a React framework, and renders entirely through SVG elements positioned via transforms.

CChinzorigt Ganbat
92% match