Let us make a face with D3.js

100%

Let us make a face with D3.js

✓ Published0🌍 Public

Last edited Feb 3, 2020

Created on Jan 31, 2020

A face built from basic SVG shapes animates into a smile in this D3.js v5 example. Yellow circle head, black eyes, and rectangular eyebrows are drawn via `d3.select` and SVG attributes, then the smile uses the `d3.arc` generator. Transitions on the mouth and one eyebrow change their shape over two seconds, creating a cheerful expression. The other eyebrow remains static, showing asymmetric animation.

AI-generated description

Let us make a face with D3

MIT Licensed

Similar vizzes

Loading thumbnail…

Let's make a face with D3.js!

A smiling yellow face rendered in SVG animates its eyebrows up and down. D3.js version 5 builds the face from basic shapes: a circle for the head, two circles for the eyes, rectangles for the brows, and an arc-generated path for the mouth. The eyebrow animation uses chained `transition().duration()` calls to move the group containing the rectangles.

Ssathesujit

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

95% match

Loading thumbnail…

Let's make a face with D3.js!

A smiling face built with SVG demonstrates basic D3.js DOM manipulation and animation. Drawn with a yellow circle, two eyes, rectangular eyebrows, and an arc-based mouth, the face animates by moving the eyebrows upward and back down using chained `transition().duration()` calls. The example uses D3 v5’s `select`, `arc`, and `attr` methods to construct and style elements, with the eyebrow displacement triggered automatically on load.

RRoyCsuka

95% match

Loading thumbnail…

Let's make a face with D3.js

This example uses D3.js v5 to construct a smiling face from basic SVG shapes. A yellow circle forms the head, while two smaller circles become the eyes. The code animates the eyebrows using chained `transition().duration()` calls, moving them up and then back down over two seconds. A mouth is drawn using the `arc()` generator from D3’s shape utilities, creating a curved path. All elements are positioned relative to the SVG center using a `g` transform, and the entire composition is rendered as static SVG with animated attributes.

MMichał Szumnarski

95% match

Loading thumbnail…

Let's make a face with D3.js!

This example uses D3.js v5 to build a smiley face from basic SVG shapes. A yellow circle forms the head, with two smaller circles for eyes, rectangular eyebrows, and an arc-based mouth. The eyebrows animate by translating up and down in a loop using chained `transition()` calls with 2-second durations. The code demonstrates fundamental DOM manipulation via D3 selections, `append()`, and `attr()`, while the `arc()` generator from D3’s shape module creates the mouth path. All elements are centered using a translated SVG `<g>` group.

AAlain Jennotte

95% match

Loading thumbnail…

Let's make a face with D3.js!

This example shows a yellow smiley face built from SVG shapes, with its eyebrows smoothly sliding upward and then back down in a repeating animation. The code uses D3.js v5 selections to append a circle for the face, separate circles for the eyes, rectangles for the eyebrows, and a path generated with the `d3.arc` function for the mouth. Eyebrow movement is driven by chained `transition().duration()` calls that update the group’s `transform` attribute.

Lliuleirain

95% match

Loading thumbnail…

Let's make a face with D3.js!

A D3.js example builds an animated smiley face from basic SVG shapes, including a yellow circle, black eyes, an arc-based mouth, and eyebrow rectangles. The eyebrows move up and down repeatedly using chained `transition` and `duration` calls on the rectangle elements. The code imports `select` and `arc` from D3, appends shapes to an SVG canvas, and relies on D3 v5 for DOM manipulation and animation, with no external data source.

Lliunaiming

95% match

Loading thumbnail…

Let's make a face with D3.js!

This D3.js v5 example demonstrates fundamental DOM manipulation by building a smiling face from SVG primitives, including yellow circles for the head and eyes, and rectangular eyebrows that animate upward and downward. The code constructs the face using `d3.select`, `svg.append`, and shape methods like `.attr`, while `d3.arc` generates the mouth as a path with specified inner and outer radii. A chained `transition().duration(2000)` sequence repeatedly moves the eyebrows up and down, creating a simple looping animation.

IIsabel

95% match