make a face in d3

100%

make a face in d3

✓ Published0🌍 Public

Last edited Feb 13, 2021

Created on Feb 12, 2021

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.

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

95% match

Loading thumbnail…

Lets make a face with d3

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.

SSchmittYannic

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

94% match

Loading thumbnail…

D3 Lets make a face

A yellow circle with black outlines forms a face, featuring two eyes and rectangular eyebrows that animate in a bouncing motion. The left eye pulses by scaling its radius via chained D3 transitions, while the entire eyebrow group shifts vertically. A mouth initially appears as a narrow arc, then expands into a filled semicircle using D3’s `arc` generator and a `transition` that updates the path’s `d` attribute. The example uses `d3.select` to manipulate SVG elements within a React framework.

Aant999

93% match

Loading thumbnail…

Lets make a face with d3

A smiling yellow face rendered in SVG is built from geometric primitives using D3 selections, with animated eyebrows that repeatedly raise and lower. The code constructs circles for eyes, rectangles for brows, and a path generated by the `d3.arc` API for the mouth, all grouped and positioned via SVG transforms. The eyebrow animation uses chained `transition().duration()` calls to toggle the y-offset between states. The example relies on D3 v5 and vanilla SVG.

SSurya Teja Parnampedu

93% match

Loading thumbnail…

Let's make a face with D3.js

A yellow circular face with black-outlined eyes and animated eyebrows is rendered in SVG using D3.js. The face is built from D3 selections and shape generators, including `d3.arc` for the mouth path. Eyebrows transition vertically using `transition.attr` with a 2000-millisecond duration, creating a repeated raising motion. The example demonstrates basic D3 data binding, SVG shape construction, and animation chaining on a static, hardcoded dataset.

Sssdark

93% match

Loading thumbnail…

make a face with d3.js

A smiling face drawn with basic SVG shapes animates its eyebrows in a looping motion. The example builds a yellow circle for the face, adds two black eyes and a mouth, then runs a repeating transition that moves the eyebrows upward and back down. It uses D3 v5 selections, the `arc()` generator for the mouth path, and chained `transition().duration()` calls to create the animation. The code constructs the layout relative to the SVG’s center and uses the `translate` attribute for positioning.

Kkrishv2

93% match

Loading thumbnail…

Let's make a face with d3.js

A yellow circle with black outline forms a face via SVG. Two black eyes and rectangular eyebrows animate upward and downward in a repeating transition, while an arc-shaped mouth uses d3.arc. The code builds the face with d3.select, appends SVG shapes, and applies chained transition().duration() calls to move the eyebrow group. All elements are positioned via SVG attributes within a centered group.

JJustinS1209

93% match