Skip to main content
SimilarExport ZIP
100%

Let's make a face with D3.js!

✓ Published1🌍 Public
AAndrew Yan
Last edited Jun 4, 2020
Created on Jun 4, 2020

This example builds a smiley face with D3.js, showing a yellow circle with eyes, eyebrows, and a mouth. The face is static, but the eyebrows animate by moving up and down using D3's transition system with `attr` transitions over 2000 milliseconds each. The code uses `d3.select` and `d3.append` to construct SVG elements, `d3.arc` to generate the mouth path, and `d3.transition` for the eyebrow animation. The SVG canvas is 960 by 500 pixels, and the face is centered using a group transform.

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 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 gallery example builds a yellow smiley face in an SVG canvas using D3.js v5. The face is assembled from primitive shapes—circles for the head and eyes, rectangles for eyebrows, and a path for the mouth—all positioned via D3’s `select` and `append` methods. The animation uses D3’s `transition` API to move the eyebrows up and down over two seconds, demonstrating basic DOM manipulation and chained transitions. The code defines all geometry explicitly without external data, relying on D3’s `arc` generator for the mouth’s curved path.

AAndrew Yan
96% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face with animated eyebrows demonstrates fundamental DOM manipulation with D3.js v5. The code selects an SVG element, appends circles for the face and eyes, rectangles for eyebrows, and an arc path for the mouth using d3.arc(). D3 transitions move the eyebrow group up and down over four-second intervals. Static SVG attributes set positions and colors, while the transition chain animates the transform attribute.

AAndrew Yan
95% match
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
95% match
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
95% match
Loading thumbnail…

Let's make a face with D3.js!

This example demonstrates how to build a simple animated smiley face using D3.js. A yellow circle with eyes and a mouth is constructed through fundamental DOM manipulation, using `svg.append` and `.attr` to create shapes. The face's eyebrows animate by chaining `.transition().duration()` calls to move them up and down repeatedly on the SVG canvas. The code explicitly uses D3's `select` and `arc` APIs to select the SVG element and draw the mouth path.

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

Let's make a face with D3.js!

This example shows how to build a smiley face with D3.js v5, using SVG shapes and animation to make the eyebrows move. A yellow circle forms the face, with two smaller circles for eyes and a path drawn with the `arc` helper for the mouth. The code uses `select` and `append` to create elements, and `transition().attr` to animate the eyebrows upward and back down over two seconds each way. The face is centered by translating a group element, with all dimensions derived from the SVG’s width and height attributes.

PPiotrekW2
95% match