Let's make a face with D3.js!

100%

Let's make a face with D3.js!

✓ Published1🌍 Public

Last edited Jul 15, 2019

Created on Jul 15, 2019

Forked from Let's make a face with D3.js!

This example demonstrates how to build an animated smiley face using D3.js, showing a yellow circle with eyes, eyebrows, and a mouth. The eyebrows first move upward over two seconds and then return to their original position, creating a simple raised-eyebrow animation. The code uses D3’s `select` and `append` methods to construct SVG elements, while the mouth is drawn with the `arc` shape generator. The eyebrow motion is driven by chained `transition` calls that animate the `transform` attribute.

AI-generated description

Demonstrates fundamental DOM manipulation using D3.js by making a smiley face whose eyebrows move.

MIT Licensed

Similar vizzes

Loading thumbnail…

Let's make a face with D3.js!

This example demonstrates how to build a simple animated smiley face using D3.js. It shows a yellow circle with eyes, eyebrows, and a mouth, all constructed through fundamental DOM manipulation. The code uses `d3.select` to target the SVG element, `d3.append` to create shapes, and a chained `d3.transition` sequence to animate the eyebrows moving up and down over two-second intervals. The mouth is drawn as an arc using `d3.arc` with specified inner and outer radii. The rendering is SVG-based, with all elements positioned relative to the center of the canvas.

KKarkG

96% match

Loading thumbnail…

Let's make a face with D3.js!

This example shows a yellow smiley face drawn with SVG shapes whose eyebrows animate upward and then back down. It demonstrates basic DOM manipulation with D3.js. The code uses `d3.select` and `svg.append` to build the face's circle, eye, and rectangular eyebrow elements, while the mouth is drawn with the `d3.arc` path generator. Eyebrow motion is achieved by chaining `transition().duration(2000)` calls on the brows’ parent group, moving it up and then returning it to its original position.

Ccguibourg

96% match

Loading thumbnail…

Let's make a face with D3.js!

This example shows a yellow smiley face built with D3.js that animates its eyebrows in a continuous up-and-down motion. The face is rendered as SVG elements, including circles for the eyes and an arc-generated path for the mouth, all positioned within a central group. Using D3 selections and the `transition().duration()` method, the eyebrows—drawn as rectangles—move in a two-step sequence that repeats once. The code imports `select` and `arc` from the D3 v5 library to create the shapes.

SSimon Fei

96% match

Loading thumbnail…

Let's make a face with D3.js!

This example builds a yellow smiley face with D3.js, featuring eyes, eyebrows, and a mouth rendered as SVG shapes. The code uses D3 selections to append a circle for the face, two circles for eyes, rectangles for eyebrows, and an arc path for the mouth. A chained `transition` with a 2-second duration animates the eyebrow group’s vertical position upward and then back, creating a moving-brow effect. The face is centered within a 960×500 SVG, and the animation runs once on page load.

Aarg04

96% match

Loading thumbnail…

Let's make a face with D3.js!

This example demonstrates fundamental DOM manipulation with D3.js by building an animated smiley face. The visualization shows a yellow circle with eyes, eyebrows, and a mouth, where the eyebrows perform a continuous up-and-down movement. The code uses D3’s `select` and `append` to construct SVG elements, and `transition().duration()` to animate the eyebrow group’s `transform` attribute over 2000-millisecond intervals. The mouth is drawn with a `d3.arc` path generator, while hardcoded constants control facial feature positioning and spacing. The rendering is entirely SVG-based, with static input values defining the geometry.

OOrangTang

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

96% match

Loading thumbnail…

Let's make a face with D3.js!

This example shows a yellow smiley face drawn with SVG shapes, whose eyebrows animate upward and then back down in a looping motion. It demonstrates fundamental D3.js DOM manipulation by selecting an `<svg>` element and appending groups for the eyes and eyebrows, using `d3.select` and `d3.arc` for the mouth path. The eyebrow movement relies on chained `transition().duration()` calls that adjust a `transform` attribute, while the face’s geometry is defined via static attributes for circles, rectangles, and the arc path.

LLuce Liu

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