TEST2 Let's make a face with D3.js!

100%

TEST2 Let's make a face with D3.js!

✓ Published0🌍 Public

Last edited Mar 12, 2020

Created on Mar 12, 2020

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

A smiling face drawn with SVG circles and an arc path animates its rectangular eyebrows upward and downward in a looping two-second transition. Using D3.js v5, the example demonstrates fundamental DOM selection and manipulation with `select`, `append`, and `attr`, while the mouth is generated via the `arc` generator. The code builds the face from absolute coordinates and applies a chained `transition` to the eyebrow group, showcasing data-free, direct SVG updates and timed animation without scales or data binding.

AI-generated description

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

MIT Licensed

Similar vizzes

Loading thumbnail…

Test Let's make a face with D3.js!

A smiling face rendered as yellow SVG circles, rects, and an arc path demonstrates fundamental D3.js DOM manipulation. Eyebrows animate upward and back down through chained `transition().duration(2000)` calls on the group’s `transform` attribute, while the mouth uses `d3.arc`. The code builds the figure by selecting the SVG, appending groups, and setting shape attributes for eyes, eyebrows, and face from fixed numeric constants, with no external data source.

Bbakstorage00001

92% match

Loading thumbnail…

Let's make a face with D3.js!

A smiling face drawn in SVG animates as its eyebrows repeatedly rise and fall. The example demonstrates fundamental D3.js DOM manipulation by using `select`, `append`, and `attr` to construct circles, rectangles, and a path for the mouth, with an `arc` generator for the smile. The eyebrow motion is driven by a two-stage `transition` with a two-second duration each, moving a group element vertically to create the expressive loop.

AArriannePandaraoan

91% match

Loading thumbnail…

Let's make a face with D3.js!

AArriannePandaraoan

91% match

Loading thumbnail…

Let's make a face with D3.js!

A smiling face is drawn with SVG shapes, with its eyebrows animating up and down in a repeating loop. The example demonstrates fundamental DOM manipulation in D3.js v5, using `select` and `append` to build circles, rectangles, and a path. The mouth is created with the `d3.arc` API, and the eyebrow motion relies on chained `transition().duration()` calls to alternate the transform attribute, creating a simple, continuous facial animation.

PParminder Singh

91% match

Loading thumbnail…

Let's make a face with D3.js!

A smiling face rendered as SVG animates its eyebrows through a repeating two-second cycle. The code uses D3 v5 selections and transitions to manipulate SVG elements, building the face from circles, rectangles, and an arc-generated path for the mouth. The `transition().duration()` calls sequentially shift the eyebrow group up and down, demonstrating fundamental DOM manipulation with D3's data-binding and animation APIs.

Hhsrashmi

91% match

Loading thumbnail…

Let's make a face with D3.js!

This example builds a smiling face from basic SVG shapes using D3.js, with animated eyebrows that move up and down in a looping transition. The code selects an SVG element, centers a group, and appends a circle for the head, circles for eyes, rects for eyebrows, and a path for the mouth generated with the `d3.arc()` helper. Using `d3.transition()` and `.duration(2000)`, the eyebrows shift vertically twice, creating a repetitive motion. The demonstration focuses on fundamental DOM manipulation—such as `.append()`, `.attr()`, and chained transitions—while rendering entirely in SVG with no external data.

Vveagy

91% match

Loading thumbnail…

Let's make a face with D3.js!

This example creates a smiling face from basic SVG shapes, with its eyebrows repeatedly moving up and down. It demonstrates fundamental D3.js DOM manipulation by appending and styling circles, rectangles, and a path for the mouth. The code uses `d3.select`, `d3.arc` for the mouth, and chained `transition().duration()` calls to animate the eyebrow group’s transform attribute. The face is centered via a translated `<g>` element, with eye spacing and offsets defined as numeric constants.

MMartin Lord

91% match

Loading thumbnail…

Let's make a face with D3.js!

A smiling face drawn with SVG shapes in D3.js animates its eyebrows upward and back down over two seconds. The example demonstrates fundamental DOM manipulation using D3’s `select` and `append` methods to build circles for eyes, rectangles for eyebrows, and an arc-based path for the mouth. A chained `transition` with a two-second duration moves the eyebrow group’s `transform` attribute, showing how to animate SVG elements with D3’s transition system.

Mmarci640

91% match