Let's make a face with D3.js!

100%

Let's make a face with D3.js!

✓ Published4🌍 Public

Last edited Jul 17, 2019

Created on Jul 15, 2019

A smiling face built from basic SVG shapes in D3 v5 demonstrates modular JavaScript composition. The code constructs circles, rectangles, and an arc-generated mouth using `d3.arc`, then positions them relative to a central group. Eyebrows animate downward and back via chained `transition().duration()` calls, simulating a blink-like motion. The face uses fixed dimensions from the SVG viewport, with all elements drawn programmatically from math constants rather than external data.

AI-generated description

An example tutorial of how to use JavaScript objects, arrays, and modules.

MIT Licensed

Similar vizzes

Loading thumbnail…

Let's make a face with D3.js!

A smiling face built from SVG primitives demonstrates basic D3.js DOM manipulation. Circles form the head, eyes, and mouth, while rectangles serve as eyebrows. The eyebrows animate via chained `transition().duration(2000)` calls, moving down and up over four seconds. The mouth is drawn using the D3 `arc` shape generator, and the entire composition is placed inside a red-background SVG canvas.

PPranita Khandelwal

95% match

Loading thumbnail…

Let's make a face with D3.js!

A smiling face built from SVG shapes animates through D3.js v5, using circles for the eyes and face, rectangles for eyebrows, and a path with the d3.arc generator for the mouth. The code demonstrates SVG element construction, attribute binding, and a chained transition that moves the eyebrows up and down over two seconds. A decorative bindhi path and sparkle circle add detail, with all elements grouped and translated relative to the SVG canvas center.

EEllen Cubbin

95% match

Loading thumbnail…

Let's make a face with D3.js!

A smiling cartoon face is drawn and animated using SVG primitives, with two eyes, eyebrows, and a mouth constructed from circles, rectangles, and a D3 arc path. The eyebrows repeatedly rise and fall via chained `transition().duration()` calls triggered by `setInterval`. Built with D3 v5, the code uses `select` for DOM access and the `arc` generator to shape the mouth, with all elements centered on an SVG canvas.

RRamziCharradi

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

94% match

Loading thumbnail…

Let's make a face with D3.js!

This example builds a simple orange smiley face using D3.js v5 and SVG primitives, including circles, rectangles, and a path created with the `d3.arc` generator for the mouth. The face is centered via a group transform, with eyebrows animated upward and back down using chained `transition.attr` calls over two seconds each. The code explicitly sets dimensions from the SVG attributes and uses fixed pixel offsets for eye spacing and eyebrow placement, demonstrating basic SVG rendering and animation without external data.

Wwsupko

94% match

Loading thumbnail…

Let's make a face with D3.js!

A smiling cartoon face is drawn with D3.js, rendered as SVG shapes. The face uses circles for the head and eyes, rectangles for eyebrows, and an arc-based path for the mouth. The eyebrows animate by moving downward and back upward over six seconds using chained `transition` calls with a 3000-millisecond duration. The code constructs the face using `d3.select`, `d3.arc`, and `d3.transition` APIs on the SVG canvas.

BBKirst3

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

94% match

Loading thumbnail…

Let's make a face with D3.js!

This example shows a smiley face drawn with SVG circles, rectangles, and an arc for the mouth. Its eyebrows bounce up and down repeatedly in an animated loop. The code demonstrates fundamental DOM manipulation with D3.js v5, using `select`, `append`, and chained `transition().duration()` calls to animate the eyebrow group’s transform. The face uses hardcoded dimensions, no external data, and renders entirely through SVG primitives within a 960x500 canvas.

Ttsinghkhalsa

94% match