Skip to main content
SimilarExport ZIP
100%

Let's make a face with D3.js!

✓ Published0🌍 Public
JJishen Xu
Last edited Aug 25, 2018
Created on Aug 25, 2018

This example demonstrates how D3.js can build an animated smiley face from SVG primitives, showing a yellow circle head with black eyes, arched eyebrows, and a mouth. The eyebrows transition up and down repeatedly over two-second intervals using chained `transition().duration()` calls. The code uses D3 v5 selections, the `arc` generator to create the mouth path, and SVG attribute binding for positioning. All elements are centered dynamically using the SVG’s width and height, with facial features offset by fixed pixel values.

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 builds a smiley face from basic SVG shapes using D3.js, demonstrating core DOM manipulation and selection techniques. The code appends a yellow circle for the head, two eyes, rectangular eyebrows, and an arc-based mouth inside a centered group element. The eyebrows animate by chaining `transition` calls with a two-second duration, moving them upward and back down in an infinite loop. The implementation uses D3’s `select`, `append`, `attr`, and `arc` APIs to construct and position all elements.

LLinkous
96% match
Loading thumbnail…

Let's make a face with D3.js!

This example builds a smiley face with D3.js, demonstrating fundamental DOM manipulation and animated transitions. Using SVG elements, it constructs a yellow circle head, two eyes, rectangular eyebrows, and an arc-shaped mouth via the `arc()` generator. The code selects the SVG and appends groups to position features, then uses `transition().duration()` to animate the eyebrows upward and back down over four seconds. The example showcases D3 v5’s data-join-free approach, relying on direct selection, attribute setting, and chained transitions to create a simple, expressive character animation.

KKurt J Nilsen
96% match
Loading thumbnail…

Let's make a face with D3.js!

A smiley face rendered in SVG uses D3.js selections to build its features. The code draws a yellow head, eyes, and a mouth with an `arc` path generator, while the eyebrows animate through chained `transition` calls that alternate their vertical offset. The face is centered with a translation, and all shapes are created by appending SVG elements, demonstrating basic DOM manipulation and data-driven animation.

JJishen Xu
96% match
Loading thumbnail…

Let's make a face with D3.js!

This example illustrates fundamental DOM manipulation with D3.js by building a smiley face from SVG primitives. A yellow circle forms the head, with two eye circles, a mouth path created using the `arc` generator, and rectangular eyebrows. The animation uses chained `transition()` calls to animate the eyebrow group's `transform` attribute upward and then back down over two seconds each, creating a simple moving expression. The code relies on `svg.append`, `.attr`, and D3's selection and transition APIs, rendering entirely through SVG without external data.

Mmariamy
96% match
Loading thumbnail…

Let's make a face with D3.js!

This example shows a yellow smiley face drawn with SVG circles, rectangles, and an arc path, with animated eyebrows that rise and fall in a looping transition. The code uses D3.js v5 selections to append elements to an SVG canvas and `transition().duration()` to move the eyebrow group vertically. Using `d3.arc` for the mouth and fixed pixel offsets for features, it demonstrates fundamental DOM manipulation and chained transitions without external data.

Rranger
96% match
Loading thumbnail…

Let's make a face with D3.js!

This example draws a yellow smiley face with D3.js, showing how to build and animate SVG shapes through fundamental DOM manipulation. The face is composed of circles for the eyes and an arc-generated mouth, while the code uses `transition.attr` to move its rectangular eyebrows up and down over two-second intervals. It uses D3 v5’s `select`, `attr`, `append`, and `arc` API to construct the scene, with all elements centered via an SVG `<g>` transform. The animation repeats once, demonstrating chained transitions on SVG attributes.

Wwen787
96% match
Loading thumbnail…

Let's make a face with D3.js!

This example draws a yellow smiley face with D3.js, showing how to build and animate SVG shapes through fundamental DOM manipulation. The face is composed of circles for the eyes and an arc-generated mouth, while the code uses `transition.attr` to move its rectangular eyebrows up and down over two-second intervals. It uses D3 v5’s `select`, `attr`, `append`, and `arc` API to construct the scene, with all elements centered via an SVG `<g>` transform. The animation repeats once, demonstrating chained transitions on SVG attributes.

Wwen787
96% match