Skip to main content
SimilarExport ZIP
100%

Lets make a face

✓ Published0🌍 Public
BBreu1995
Last edited Feb 12, 2021
Created on Feb 12, 2021

A yellow smiley face is drawn on an SVG canvas using D3.js selection and arc methods. The face includes circles for eyes and a path for the mouth, while rectangular eyebrows animate vertically through chained transition calls over two-second intervals. This example demonstrates fundamental DOM manipulation by building shapes from appended SVG elements and updating their attributes with D3 transitions.

AI-generated description

Demonstrates fundamental DOM manipulation using D3.js by making a smiley face whose eyebrows move.

MIT Licensed

Similar vizzes

Loading thumbnail…

Lets make a face

A simple yellow smiley face is drawn in an SVG, composed of a large circle, two eyes, and a curved mouth. The face’s eyebrows animate upward and then back down in a repeating sequence using D3 v6 transitions. The visualization is built with D3 selections and the `arc` generator for the mouth, while all geometric properties are defined as constants in the code.

Kkhuton
94% match
Loading thumbnail…

Lets make a Face!

A yellow smiley face appears centered on an SVG canvas, built from D3 shapes: a circle for the head, two circles for eyes, rectangles for eyebrows, and a path for the mouth. The eyebrows animate upward and back down repeatedly using D3's `transition()` with a two-second duration. The code uses `d3.select`, `d3.arc`, and attribute setters to construct the static face, while the animation is driven by chained `transition().attr()` calls, rendering in SVG.

OOvxOO
94% match
Loading thumbnail…

Lets make a face

A D3.js animation constructs a smiling face from basic SVG shapes: a yellow circle for the head, two circles for eyes, and an arc path for the mouth. The left eyebrow rectangle performs two sequential transitions, moving upward then returning to its original position. The code uses D3's selection and arc APIs, appending shapes to an SVG canvas with a translated coordinate system.

Ssreen020
94% match
Loading thumbnail…

Lets Make a Face

A yellow smiley face animates on an SVG canvas as its eyes and eyebrows move independently and its mouth is drawn with an arc path. The example demonstrates D3 v7 transitions, using `d3.select`, `d3.arc`, and chained `.transition().duration()` calls to shift eye positions and raise eyebrows over different time intervals. SVG elements—circles for eyes, rectangles for eyebrows, and a path for the mouth—are appended to a centered group, showing how D3 manipulates attributes and transitions to create simple character animation.

Ggabrielribeirob
94% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face with black outlines is drawn on an SVG canvas, centered in the viewport. Its eyes, eyebrows, and mouth are all composed of basic geometric shapes. Using D3.js v5, the code builds the face by appending circles, paths, and rectangles to SVG groups. An animation sequence uses chained `.transition()` calls to shift the eyebrows up and down, with each movement lasting two seconds. The mouth is created using the `arc()` API, while the overall structure demonstrates fundamental SVG DOM manipulation via D3 selection and attribute methods.

AAndrey Chergik
94% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face is drawn on an SVG canvas with D3.js, featuring eyes, eyebrows, and a mouth. The eyebrows transition up and down repeatedly over two-second intervals using D3's `transition()` and `attr()` methods. The face is built from basic SVG shapes—circles for the eyes and a path generated with `d3.arc()` for the mouth. All elements are positioned dynamically based on the SVG's width and height attributes.

MMathias Brem
93% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face rendered in SVG demonstrates fundamental D3.js DOM manipulation. The face uses D3 v5's `select` and `arc` to append a circle, eyes, and a mouth, with the mouth created via the `arc()` generator. Eyebrows, drawn as rectangles, animate upward and downward through chained `transition().duration()` calls, while the mouth also shifts position over two seconds. All elements are positioned within a centered `<g>` group, showing basic SVG construction and data-driven updates.

AAniket
93% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face is drawn in the center of an SVG canvas, with a black-outlined circle, two eyes, a nose, arched mouth, and pair of rectangular eyebrows. The eyebrows animate upward and then back down in a looping sequence. Built with D3.js v5, the example demonstrates fundamental DOM manipulation using selection and append methods, along with the `arc` generator to create the mouth and nose, and `transition` with `duration` to move the eyebrow group. No external data is used; all shapes are coded directly.

LLinn
93% match