Make a face with D3.js!

100%

Make a face with D3.js!

✓ Published0🌍 Public

Last edited Nov 24, 2020

Created on Nov 24, 2020

This example shows a stylized yellow face built with SVG elements, including eyes, eyebrows, and a smile, which animate by moving the eyebrows up and down. The face is constructed using D3.js v6 selections to append circles, rectangles, and an arc-generated path for the mouth. The code uses `d3.select`, `d3.arc`, and `.transition().duration()` to create the two-second eyebrow movement loop. A separate text input and button trigger a JavaScript alert, though the face animation runs independently of that interaction.

AI-generated description

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

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…

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

93% match

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!

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

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

93% match

Loading thumbnail…

Let's make face with d3

A yellow circle with eyes, eyebrows, and a smile forms a face using D3.js selections and SVG shapes. The eyebrows animate upward and back down via chained `transition().duration(2000)` calls, demonstrating declarative sequencing. Code uses `select`, `attr`, and `arc` from D3 v6 within a React project, parsing the SVG’s width and height attributes to center the face. The mouth is drawn with an `arc()` path generator, and all elements are grouped with `translate` transforms for relative positioning.

TTrustPaul

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

93% match