Fork of Let's make a face with D3.js

100%

Fork of Let's make a face with D3.js

✓ Published0🌍 Public

Last edited Feb 22, 2021

Created on Feb 22, 2021

Forked from Let's make a face with D3.js

A yellow circle with black facial features animates its eyebrows in a looping motion. The face is drawn with SVG elements in D3.js v3, using a `circle` for the head and eyes, `rect` elements for the eyebrows, and an `arc` path for the mouth. The eyebrows move vertically via chained `transition` calls with a 2000-millisecond duration, shifting down then returning to their original offset.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Let's make a face with D3.js

A yellow circle face with black eyes, eyebrows, and a mouth is drawn in SVG using D3 v6. The mouth is generated with the `arc` generator, while the eyes and eyebrows are circles and rectangles. Eyebrows animate vertically via chained `transition().duration()` calls, moving down and then back up, using D3's selection and transition methods.

SSerena Fang

97% match

Loading thumbnail…

Fork of Let's make a face with D3.js

A stylized yellow SVG face, built with D3.js, animates its eyebrows in a looping up-and-down motion. The face is constructed from basic shapes: a circle for the head, two circles for the eyes, rectangles for the eyebrows, and a D3 arc path for the mouth. The eyebrows move repeatedly via chained `transition().duration()` calls that translate their containing group. All elements are centered using SVG transforms, with dimensions derived from the SVG element’s height and width attributes.

JJorrr2

95% match

Loading thumbnail…

Fork of Let's make a face with D3.js

A yellow circle face with black-outlined eyes, animated eyebrows, and a curved mouth is rendered in an SVG. The eyebrows transition up and down repeatedly using D3 `.transition().duration()`. The code constructs the face with d3-selection and d3-arc, positioning elements via SVG transforms. The mouth path is generated using `arc()` with inner and outer radii, while eye and brow shapes are drawn as SVG circles and rectangles on a 960x500 canvas.

DDINESHSAIBOPPANA7

94% match

Loading thumbnail…

Fork of Let's make a face with D3.js!

A smiling face is rendered as a yellow circle with two eyes, animated eyebrows, and a mouth built from an arc path. The animation, driven by D3.js's `transition` method, shifts the eyebrows up and down over a two-second cycle. The face is constructed using SVG primitives—`circle`, `rect`, and `path`—positioned via `attr` transforms within a nested `g` group, with the `arc` generator defining the mouth's shape.

LLori Labrie

93% match

Loading thumbnail…

Fork of Let's make a face with D3.js!

A yellow circle with black strokes forms a smiley face’s head, featuring two circular eyes, a curved mouth, and rectangular eyebrows. The eyebrows shift downward by 50 units over two seconds and then return to their original position, creating a subtle animated movement. Built with D3 v5, the example uses DOM selection, SVG element creation, and chained `transition().duration()` calls to animate the eyebrow group’s transform. The code also employs `d3.arc` to generate the mouth’s path and `d3.select` for initial setup, rendering entirely in SVG within a 960×500 viewport.

DDrollayemi

93% match

Loading thumbnail…

Fork of Fork of Let's make a face with D3.js

A smiling face built from yellow and black SVG shapes animates its eyebrows upward and downward in a looping motion. The example constructs the face with D3 v6 selections, positioning eyes as circles, eyebrows as rectangles, and a mouth as a path generated by the `arc` generator. Transitions chain two 2-second `transition` calls on the eyebrow group to move it vertically, creating the expressive blink-like effect within the fixed 960×500 viewport.

JJorrr2

93% match

Loading thumbnail…

Fork of Let's make a face with D3.js

A yellow SVG face is drawn with D3.js v5, featuring two large eyes and an open mouth rendered as an arc path. The face uses `d3.select` and `d3.arc` to construct the shapes on an SVG canvas. The code includes a commented-out animated eyebrow section that would use `transition` to move eyebrows up and down, though the active version shows only static features. All elements are positioned using SVG transform attributes, with the face centered on a 960×500 viewport.

Jjlspangl

93% match

Loading thumbnail…

Fork of Let's make a face with d3.js

A cheerful yellow face is drawn in SVG and animated with D3.js v7. The face features a circular head, two eyes, and rectangular eyebrows that move up and down over two seconds. The mouth is rendered as an arc path using the `arc()` method, which defines its inner and outer radii and angular range. The code uses `select` to target the SVG element, `append` to build the grouped shapes, and `transition().duration()` to animate the eyebrow group’s transform, demonstrating basic D3 animation and SVG construction.

FFarhodXoliyarov

93% match