Fork of Let's Make a Face

100%

Fork of Let's Make a Face

✓ Published0🌍 Public

Last edited Apr 11, 2021

Created on Apr 11, 2021

This visualization presents a cheerful cartoon face composed of simple geometric shapes: a yellow circular head, black eyes, rectangular eyebrows, and an arc-shaped mouth. The right eyebrow animates by smoothly moving downward and then back to its original position through chained transitions. Built with D3 v5, the example uses D3's selection methods to append SVG elements and the `arc()` helper to generate the mouth's path, with the animation driven by D3's `transition().duration()`.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

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

This example displays a simple cartoon face composed of SVG shapes, centered on a yellow circle with two eyes and an arc-based mouth. The face group is positioned using a transform, and the right eye animates downward over two seconds via a D3 transition. The code uses d3.arc to generate the mouth path and d3 selection/transition methods (transition.attr) to modify attributes, with the SVG drawn directly in the browser. It forks an existing "Let's make a face" example, adapting it for D3 v5.

Hhuizrh

92% match

Loading thumbnail…

Fork of Lets make a face

This example shows a simple yellow cartoon face with eyes, eyebrows, and a mouth, built entirely with D3.js v6 and rendered as SVG. The eyebrows animate by moving up and down repeatedly over two-second transitions. The face is centered using a group translation, and the mouth is drawn with the `d3.arc` path generator. The code uses `select` and `arc` from the D3 library, with hardcoded dimensions for spacing and radius, displaying a looping motion without any external data source.

EEsteLima

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

92% match

Loading thumbnail…

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

A friendly face built from SVG shapes—yellow circle head, black eyes, eyebrows, and an arc mouth—is centered in a 960×500 viewport. Using D3 v6, the visualization animates the eyebrows downward and back upward over two seconds via chained `transition()` calls on a `<g>` group. The code constructs shapes with primitive SVG elements and a D3 arc generator for the mouth, demonstrating basic selection, attribute binding, and transform animation without external data.

Yyingzhe-z

91% match

Loading thumbnail…

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

A stylized, animated face rendered in SVG with D3.js v5. The face is built from primitive shapes—a yellow circle for the head, black circles for eyes, and an orange arc for a mouth—all centered within a 960x500 canvas. The animation is driven by D3's transition system, which moves the eyebrows upward and back over two seconds each. The code demonstrates modular imports from `d3`, including `select` and `arc`, and uses `arc()` to generate the mouth path with specified inner and outer radii and angular extents.

Jjlspangl

91% match

Loading thumbnail…

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

A smiling cartoon face is drawn with SVG shapes, including a yellow circle for the head, black circles for eyes, rectangular eyebrows, and an arc-based mouth. The eyebrows animate upward and back downward over four seconds using chained D3 transitions. The code uses d3-selection to append elements to an SVG canvas and d3-shape’s `arc()` function to generate the mouth path. The face is centered via a group transformation, with eye spacing and offsets defined as constants.

AAdam Usmani

91% match

Loading thumbnail…

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

This visualization builds a smiling face from basic SVG shapes using D3.js v5. The code appends a yellow circle for the face, two eyes, and a mouth path generated with the `d3.arc` function, all centered via a group transformation. It demonstrates animated DOM manipulation by applying a looping `transition` with a 2-second duration to the eyebrows group, moving it up and down. The example uses `d3.select`, `d3.append`, and attribute setters like `.attr` to construct the scene, with styles handled in an external stylesheet.

Rrohitchavan007

91% match

Loading thumbnail…

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

A yellow smiley face is drawn on an SVG canvas, with two eyes and a mouth created using D3's `arc` generator. The eyebrows, rendered as rectangles, animate upward and back down repeatedly via chained `transition` calls with a 2-second duration each. The code uses D3 v5 selections to append circles, rectangles, and a path, and stores numeric layout variables for spacing and offsets.

Aanmarsan

91% match