Skip to main content
SimilarExport ZIP
100%

D3

✓ Published1🌍 Public
KKyllVis
Last edited May 14, 2020
Created on May 14, 2020

A smiling face rendered in SVG animates its eyebrows upward and downward in a repeating cycle. Built with D3 v5, the visualization uses `select` and `arc` to construct the circular head, eyes, and mouth. Two rectangles serve as eyebrows, moved via chained `transition` and `.attr` calls on a group element to create the bounce effect.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Face with D3

A smiling face drawn with SVG shapes animates its eyebrows up and down in a looping transition. The example uses D3 v4 selections to append circles for the eyes, rectangles for the eyebrows, and a path generated with the `d3.arc()` API for the mouth. All elements are centered within an SVG using a group transform, and the eyebrow motion is driven by chained `transition.attr()` calls on the group’s transform attribute.

Nngannie
89% 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
88% 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
88% match
Loading thumbnail…

D3

A yellow circle with eyes, eyebrows, and a mouth forms a smiling face, rendered as SVG elements. The right eyebrow animates upward and back down over four seconds using D3 transitions. The face is centered in a 960×500 viewport, with the mouth drawn via the `arc` generator and all shapes grouped and translated using D3's `select` and `append` methods. The animation runs in an infinite loop, triggered by chained `transition().duration()` calls on the eyebrow rectangle.

JJeffrey Miiller
88% match
Loading thumbnail…

D3 Face

A cartoon face rendered in SVG uses D3 v5 to build a yellow circle head with black eyes and an arc-based mouth. Eyebrows, drawn as rectangles, animate vertically through chained `transition` calls on a group element. The code leverages D3’s `select` and `arc` APIs, with static attributes for positioning and a repeated eyebrow movement lasting two seconds per phase, demonstrating basic SVG construction and timed animation.

Ttenghaoman
87% match
Loading thumbnail…

Let's make a face with D3.js!

A smiling face rendered in SVG animates its eyebrows up and down via D3 transitions. The visualization uses `d3.select` to manipulate the SVG, `d3.arc` to construct the mouth path, and chained `transition.attr` calls to move the eyebrow rectangles over two-second durations. The code demonstrates fundamental DOM manipulation with D3 v5, importing `select` and `arc` via ES6 modules, and lays out the face using hardcoded pixel offsets for the eyes, eyebrows, and mouth within a 960×500 viewport.

Ssfloyd11
87% match
Loading thumbnail…

Let's make a face with D3.js!

The visualization demonstrates a smiley face constructed from SVG primitives, with animated eyebrows that raise and lower over a four-second cycle. It shows how D3.js v5 manipulates the DOM by appending circles, rectangles, and a path formed with the `arc` generator to build the face. A chained `transition` call on the eyebrows group animates the vertical offset, first lifting then lowering the brows. The code imports `select` and `arc` from the D3 library and uses the `transition().duration()` API to create the timed motion.

SSirikanyaR
87% match
Loading thumbnail…

Let's make a face with D3.js!

A smiling face built with D3.js animates its eyebrows in a looping vertical motion. The visualization demonstrates core SVG manipulation through D3 selections, appending circles for the head and eyes, rectangles for eyebrows, and an arc-generated path for the mouth. Chained `transition()` calls with 2000-millisecond durations continuously shift the eyebrow group’s transform attribute, creating the expressive movement against a 960×500 SVG canvas.

UUGarCil
87% match