make a face with d3.js

100%

make a face with d3.js

✓ Published0🌍 Public

Last edited Jun 16, 2020

Created on Jun 16, 2020

A smiling face drawn with basic SVG shapes animates its eyebrows in a looping motion. The example builds a yellow circle for the face, adds two black eyes and a mouth, then runs a repeating transition that moves the eyebrows upward and back down. It uses D3 v5 selections, the `arc()` generator for the mouth path, and chained `transition().duration()` calls to create the animation. The code constructs the layout relative to the SVG’s center and uses the `translate` attribute for positioning.

AI-generated description

MIT Licensed

Similar vizzes

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

94% match

Loading thumbnail…

Make a face with D3.js

A smiling face made of SVG shapes is drawn with D3.js v5. The face uses a yellow circle, black-outlined eyes, rectangular eyebrows, and an arc-based mouth. A chained `transition` repeatedly raises and lowers the eyebrows over two-second intervals. The code imports `select` and `arc` from the D3 library, positions elements with SVG attributes, and animates the eyebrow group via `transition.attr`. The example demonstrates basic SVG composition and D3 transitions on a 960×500 canvas.

TTapiwa Lason

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

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

94% match

Loading thumbnail…

Let's make a face with D3.js!

This example uses D3.js v5 to construct a smiling face from SVG primitives, with animated eyebrows that move up and down over time. The face consists of a yellow circle, two eyes, eyebrows, and a mouth drawn using an arc path. The animation is handled through chained `transition().duration(2000)` calls that alternately shift the eyebrow group’s `transform` attribute, creating a simple looping motion. The code relies on methods like `select`, `append`, and `attr` for DOM manipulation, along with D3’s `arc` generator for the mouth shape.

Vveagy

94% match

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

94% match

Loading thumbnail…

Let's make a face with D3.js!

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.

DD2552

94% match

Loading thumbnail…

Let's make a face with D3.js!

A smiling face drawn with SVG shapes responds to a looping animated transition: the eyebrows move upward, hold, then return. The example demonstrates fundamental D3.js DOM manipulation, building the face from a yellow circle, two dark eyes, rectangular eyebrows, and a smile-shaped path generated with the `d3.arc()` function. D3.js v5 selects the SVG element, appends groups for coordinated positioning, and uses `transition().duration(2000)` to animate the eyebrow group's vertical offset. All elements are styled directly via attributes like `fill` and `stroke` within an 960×500 SVG canvas.

MMark Moesch

94% match