Skip to main content
SimilarExport ZIP
100%

Let's make a face with D3.js!

✓ Published0🌍 Public
PPetetoni
Last edited May 22, 2020
Created on May 22, 2020

This example animates a smiley face composed of SVG shapes, including a yellow head, eyes, ears, nose, and a mouth, with eyebrows that rise and fall. The face is centered within an SVG canvas using D3.js’s `select` and `append` methods. The code uses `d3.arc` to generate the ear, nose, and mouth paths, while the eyebrow motion is driven by chained `transition().duration()` calls. All shapes are drawn directly with D3’s DOM manipulation, relying on the SVG rendering and animation capabilities.

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 shows a yellow smiley face drawn in SVG, with eyebrows that animate upward and then return to their original position. The face is constructed through fundamental D3.js DOM manipulation, using `select` and `append` to build circles, rectangles, and a path. The mouth is created with the `d3.arc` generator, while eyebrow movement relies on chained `transition().duration()` calls that modify a `transform` attribute. All shapes are centered within an SVG element sized 960 by 500 pixels.

DDan Mihaila
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
95% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face is drawn in SVG, with its eyebrows animated to move up and down in a continuous loop. The example demonstrates basic DOM manipulation with D3.js, using `d3.select` and `d3.append` to build the face from circles, rectangles, and a path, then applying `transition().duration()` to animate the eyebrow movement. The mouth is created using the `d3.arc` shape generator, and the entire scene is centered within an SVG canvas of fixed dimensions.

FfacundoEMartin
95% match
Loading thumbnail…

Let's make a face with D3.js!

A smiley face rendered in SVG with D3.js shows animated eyebrows that move upward and downward in a looping transition. The code builds the face by appending a yellow circle for the head, two smaller circles for eyes, and a mouth path using D3's `arc` generator. Eyebrows are rectangles that animate via chained `transition().duration()` calls, shifting their y-position. The example demonstrates fundamental DOM manipulation with D3 selections and SVG attributes, using d3.select and d3.arc from the D3 v5 library.

PPetetoni
95% match
Loading thumbnail…

Let's make a face with D3.js!

This example shows a yellow smiley face with eyes, eyebrows, and a mouth built from SVG shapes using D3.js. The face is centered in an SVG canvas, with a circle for the head, two circles for eyes, rectangles for eyebrows, and an arc-generated path for the mouth. D3’s `selection.append`, `attr`, and `transition` APIs animate the eyebrows by shifting their group’s transform down and back over two two-second intervals. The code imports `select` and `arc` from the d3 module and uses chained transitions to create the movement.

Ssourcebox-bug
95% match
Loading thumbnail…

Let's make a face with D3.js!

A smiley face is drawn with SVG shapes, including a yellow circle head, black eyes, and an arc-based mouth. The example demonstrates fundamental D3.js DOM manipulation by selecting the SVG element, appending a group, and building each facial feature with `select`, `append`, and attribute setters. The left eyebrow is a rectangle that animates up and down using chained `transition().duration()` calls with 2000-millisecond delays. The mouth is generated with the `d3.arc` shape generator, using specified inner and outer radii and angular ranges.

PPavelSHE
95% match
Loading thumbnail…

Let's make a face with D3.js!

This example shows a yellow smiley face built with SVG shapes whose eyebrows animate upward and downward in a looping motion. The code demonstrates fundamental D3.js DOM manipulation by selecting the SVG canvas, appending groups for positioning, and constructing circles, rectangles, and an arc-based mouth using `d3.select`, `d3.arc`, and chained `transition().duration()` calls. The face is centered via a translated group, with all coordinates calculated relative to the viewport dimensions.

Ggcappadaniel
95% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiling face is drawn entirely with D3.js SVG shapes, including a circular head, two eyes, animated eyebrows, and an arc-based mouth. The eyebrows and left eyebrow rectangles move up and sideways in a looping 2000-millisecond transition, while the mouth uses the d3.arc generator with specified inner and outer radii and angles. The code selects the SVG element, centers a group via translation, and applies chained transitions to animate the facial features.

PPetter-Smit
95% match