Lets make a face with D3.js

100%

Lets make a face with D3.js

✓ Published4🌍 Public

Last edited Sep 4, 2019

Created on Aug 24, 2019

This example builds a smiling face entirely from basic SVG shapes—circles for the head, eyes, and mouth, and rectangles for the eyebrows—using D3.js v5 selections and attribute setters. The code appends each element to an SVG canvas sized 960 by 500, positioning them relative to the viewport center. A transition on the right eyebrow animates it upward and back down over four seconds, demonstrating D3’s `transition().duration()` method for simple motion.

AI-generated description

An example showing the capabilities of VizHub.

MIT Licensed

Similar vizzes

Loading thumbnail…

Let's make a face with D3.js!

This example builds a smiling face from basic SVG shapes using D3.js, with animated eyebrows that move up and down in a looping transition. The code selects an SVG element, centers a group, and appends a circle for the head, circles for eyes, rects for eyebrows, and a path for the mouth generated with the `d3.arc()` helper. Using `d3.transition()` and `.duration(2000)`, the eyebrows shift vertically twice, creating a repetitive motion. The demonstration focuses on fundamental DOM manipulation—such as `.append()`, `.attr()`, and chained transitions—while rendering entirely in SVG with no external data.

Vveagy

94% match

Loading thumbnail…

Let's make a face with D3.js!

This example demonstrates fundamental DOM manipulation with D3.js by constructing a smiling face and animating its eyebrows. The code appends SVG shapes—circles for the face and eyes, rectangles for the eyebrows, and a path for the mouth—using D3’s `select` and `append` methods. The eyebrows move via chained `transition()` calls with a two-second duration, shifting their vertical position and then returning. The scene is rendered in an SVG canvas with a 960 by 500 coordinate space, centered through a transform.

SSandyWu7179290504

94% match

Loading thumbnail…

Let's make a face with D3.js!

This example builds a smiling face out of basic SVG shapes, with animated eyebrows that move up and down. Using D3.js v5, the code selects the SVG element, appends and positions circles for the eyes, rectangles for the brows, and an arc-generated path for the mouth. A transition chain on the eyebrows group animates the transform attribute over two two-second intervals, creating a subtle, looping expression change.

EEd Link III

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

Loading thumbnail…

Let's make a face with D3.js

This example builds a smiling face out of basic SVG shapes using D3.js. The code creates circles for the face and eyes, rectangles for eyebrows, and an arc-generated path for the mouth, all positioned within a centered group. It uses D3’s `select`, `attr`, `append`, and `transition` with `duration` to animate the eyebrows moving up and down. The rendering relies on an SVG element defined in HTML, and the fixed dimensions (960 by 500) are read via `parseFloat(svg.attr(...))`. The face is composed entirely from hardcoded values, with no external data.

Rrandy554

94% match

Loading thumbnail…

Let's make a face with D3.js

A smiling face drawn with SVG elements animates its eyebrows and mouth via D3 transitions. The example builds the face from primitive shapes—a yellow circle for the head, circles for eyes, rectangles for brows, and an arc path for the mouth—all positioned within a centered group. Using d3.select and d3.arc, it applies chained transition.attr methods over three-second durations to shift the brows upward and slide the mouth sideways, while static hair paths use CSS stroke styling.

Ssgzzhinde

94% match

Loading thumbnail…

Let's make a face with D3.js

Ssgzzhinde

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

93% match