Let's make a face with D3.js!

100%

Let's make a face with D3.js!

✓ Published2🌍 Public

Last edited May 30, 2020

Created on May 30, 2020

A smiling face made of SVG shapes animates its eyebrows in a looping motion. The example builds the face by centering a yellow circle, adding two eyes, and drawing a mouth using the `arc` generator from D3.js v5. Eyebrow rectangles are grouped and moved using `transition` and `attr` with a 2-second duration, shifting vertically up and down. The code imports `select` and `arc` directly from the `d3` module, sets attributes like `r`, `cx`, and `x` for positioning, and uses a 960×500 SVG canvas with a transform to center the composition.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Let's make a face with D3.js!

A smiling face made of yellow SVG shapes animates its eyebrows upward and downward in a loop. Built with D3 v5, the example uses basic selections to append and style a circle, two eye circles, rectangular eyebrows, and an arc-shaped mouth. The `arc` generator creates the mouth path, while chained `transition().duration()` calls animate the eyebrow group’s translate transform over two seconds each way. The SVG is centered via a translated group based on the viewport dimensions.

Bbluesibra

97% match

Loading thumbnail…

Let's make a face with D3.js!

A smiling face built with SVG shapes animates as its rectangular eyebrows rise and fall in a looping two-second cycle. The example demonstrates core D3.js v5 DOM manipulation, using d3-selection methods like `select`, `append`, and `attr` to construct the face, and `transition` with a duration to move the eyebrow group. Rendered at 960 by 500 pixels, the face centers itself and draws a yellow circle, eyes, and an arc-based mouth using d3-shape's `arc`.

Ssunilkrishnav

96% match

Loading thumbnail…

Let's make a face with D3.js!

A smiling face built from SVG shapes animates its eyebrows up and down in a looping transition. The example constructs the face from basic geometric elements—a yellow circle for the head, two small circles for eyes, rectangles for brows, and an arc path for the mouth—centered via a translated group. Using D3 v5, the code applies chained `transition()` and `.attr()` calls to move the eyebrow group repeatedly, while the `d3.arc()` helper generates the mouth’s curved outline. The rendering relies on SVG appended directly to the page’s `<svg>` element.

Mmaber77

96% match

Loading thumbnail…

Let's make a face with D3.js!

A smiling face built from D3.js SVG shapes animates its eyebrows upward and back down. The code uses `d3.select` to append circles, rects, and an `arc()`-generated path onto a 960×500 SVG, with a yellow circular head, black-outlined eyes, and a curved mouth. Eyebrow motion is driven by chained `transition().duration(2000)` calls that translate the eyebrow group, demonstrating sequential SVG attribute tweening.

Ddev-ignacio-h

96% match

Loading thumbnail…

Let's make a face with D3.js!

A smiling face built from SVG shapes animates as its eyebrows lift and lower repeatedly. The yellow circle head, eyes, and mouth are drawn using D3 selections with attributes like radius and position, while an arc path forms the smile. The eyebrows use D3's `transition().duration()` to shift vertically in a looping sequence. All shapes are centered via a translated group, with the example rendered entirely in SVG using d3.v5.

Jjmarcrum3

96% match

Loading thumbnail…

Let's make a face with D3.js!

This example demonstrates fundamental D3.js DOM manipulation by building a smiling face out of SVG shapes, with animated eyebrows that move up and down. A yellow circle forms the head, two circles serve as eyes, rectangles become eyebrows, and a path generated with the `d3.arc` helper creates the mouth. Using a `transition().duration(2000)` chain, the eyebrow group toggles its vertical translation, shifting it downward then returning it to the original position. The code explicitly binds SVG elements via `select` and `append`, relying on D3 v5’s modular imports for `select` and `arc`.

Rrjohnson5016

96% match

Loading thumbnail…

Let's make a face with D3.js!

A smiling face made of SVG shapes animates its eyebrows up and down in a looping cycle. The code uses D3.js selection, appending, and attribute manipulation to build a yellow circle head, two black eyes, rectangular brows, and an arc-shaped mouth from D3’s `arc` function. A chain of `transition` calls with two-second durations moves the eyebrow group up and down repeatedly, demonstrating fundamental DOM manipulation and view transitions within an SVG canvas.

Mmishaldholakia

96% match

Loading thumbnail…

Let's make a face with D3.js!

A smiley face drawn with D3.js animates its eyebrows in a looping up-and-down motion. The example demonstrates fundamental SVG construction using D3 selections and shape generators, building the face from a yellow circle, two eyes, rectangular eyebrows, and an arc-based mouth. The eyebrows transition vertically via chained `transition().duration()` calls, while `d3.arc` computes the mouth path. The code uses `select` and `arc` from D3 v5, with all elements positioned through SVG attributes.

VVerdidk

95% match