Skip to main content
SimilarExport ZIP
100%

Making Face

✓ Published1🌍 Public
Jjakenachlas
Last edited Feb 1, 2021
Created on Jan 27, 2021
Forked from Shapes with SVG

A yellow circle with a black outline forms a face, featuring two eyes, rectangular eyebrows, and a mouth shaped as a semicircular arc. The eyebrows animate by moving upward and back down over two seconds, using D3 transitions. The visualization uses D3 version 6’s `select`, `arc`, and `transition` methods, rendering shapes as SVG elements within a 960x500 viewport. The code constructs the facial features via appended circles, rects, and a path, with the mouth defined by an inner radius of 150 and outer radius of 170.

AI-generated description

A demonstration of how to start using D3 version 6.

MIT Licensed

Similar vizzes

Loading thumbnail…

making a face

A yellow circle with black features forms a simple face, with two eyes and a mouth drawn using an SVG path. The eyebrows are animated rectangles that move down and back up over four seconds. The visualization uses D3 v6 selections to append SVG shapes and the `arc` generator from D3 to create the mouth path. The `transition` method handles the eyebrow animation, while the SVG coordinate system positions features around a central group.

Jjwu534@gmail.com
94% match
Loading thumbnail…

Make a face

A yellow circle with black outlines forms a face, featuring two eyes, eyebrows, and an arc-shaped mouth drawn in SVG. The eyebrows animate upward and downward in a repeating loop using D3 transitions. The visualization uses D3 v7 APIs including `select`, `arc`, and `transition` to construct the facial features relative to the center of an SVG canvas sized 960 by 500. All elements are positioned using SVG transform attributes.

陳陳泰元
93% match
Loading thumbnail…

Let's Make a Face

A yellow circle face with black outlines displays two eyes, eyebrows, and an arc-shaped mouth on an SVG canvas. The eyebrows animate vertically, moving down and back up over a sequence of transitions. Built with D3 v5, the visualization uses `select` and `arc` from the D3 module to construct the facial features, with `transition` and `duration` controlling the eyebrow movement. The code generates the mouth using an arc generator with specified inner and outer radii and angles.

BbeauMarko
93% match
Loading thumbnail…

Making a face

A yellow circle with eyes, eyebrows, and a mouth forms a face using D3 v5 selections and SVG shapes. The right eyebrow animates upward and back down via chained `transition().attr()` calls over two seconds each, while the mouth is drawn with `d3.arc()`. All elements are positioned relative to a centered group, with eyes offset by fixed pixel distances, creating a simple, animated cartoon face.

Ttlrdevere
93% match
Loading thumbnail…

Let's Make a Face

A yellow circle face with black outlined features animates its eyebrows up and down. The visualization builds the face using d3.svg append operations, positioning circles for eyes, rectangles for brows, and a d3.arc path for the mouth. The eyebrows transition vertically via d3.transition. The SVG face is centered using a translated group, with all coordinates computed from the viewport dimensions.

IIcecreamneverfall
93% match
Loading thumbnail…

Let's Make a Face

A yellow circle face with black outlined features animates its eyebrows up and down. The visualization builds the face using d3.svg append operations, positioning circles for eyes, rectangles for brows, and a d3.arc path for the mouth. The eyebrows transition vertically via d3.transition. The SVG face is centered using a translated group, with all coordinates computed from the viewport dimensions.

IIcecreamneverfall
93% match
Loading thumbnail…

Make a Face

A yellow circle face with eyes, eyebrows, and a mouth is drawn using D3 v5 SVG primitives. The code uses `d3.select`, `d3.arc`, and `transition.attr` to animate the eyebrows downward and back upward over two seconds. All shapes are positioned relative to the SVG center via a translated group, with the mouth rendered as an arc path. The visualization demonstrates basic shape composition and chained transitions.

Aalibabagalaxy
92% match
Loading thumbnail…

D3 Face

A yellow circle with black outlines forms a face, featuring two eyes, rectangular eyebrows, and a half-circle mouth. The eyebrows animate by moving upward over two seconds and then returning to their original position. The visualization is built with D3 v7, using SVG shapes within a root group, and the mouth is drawn with the `d3.arc` path generator. The animation relies on chained `transition().duration()` calls, offering a simple, playful demonstration of D3's selection and transition methods.

Hhenryspradlin
92% match